如何根据屏幕大小更改CSS id属性

Question

我确实知道如何使用媒体屏幕功能,但是想问你们其他的东西,我真正需要的是我的项目.让我粘贴一些代码片段,以便我可以详细说明我正在寻找的内容.在下面我粘贴了我为我的网站设计制作的CSS ID:

#Disp_name {
color: #424854;
font-family: 'Open Sans',sans-serif;
font-size: 5.5em;
font-weight: bold;
line-height: 105px;
/*margin: 200px 0 25px;*/
margin: 0px 0 25px;
text-rendering: optimizelegibility;
transition: color 0.3s ease 0s; }

现在我希望当有人从小屏幕设备打开我的项目时,例如**当从400>和<450px打开时,字体大小为4em,如果> 300且<400px则为3em,如果小于<300px则2em的.

我该怎么办？请帮忙

Answer 1

正如DevIshone所说,媒体查询正是您正在寻找的.在这种情况下,它看起来像这样

@media (max-width: 450px) and (min-width: 400px) {
    font-size: 4em;
}
@media (max-width: 400px) and (min-width: 300px) {
    font-size: 3em;
}
@media (max-width: 300px) {
    font-size: 2em;
}