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开放时>和＆lt; 450px字体大小为4em，如果＆gt; 300和＆lt; 400px则为3em，如果小于＆lt; 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;
  }
}

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

2 个答案: