html - 如何根据屏幕大小更改 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;
}

Answer 2

在你的 CSS 中使用媒体查询

例如：

@media screen and (max-device-width: 480px) {
  .classname{
    font-size: 6em;
  }
}