我基本上希望我的网页可以在几乎所有移动设备上投放,包括很小的屏幕尺寸。

这已经有效,我正在CSS中使用媒体查询来为不同大小的显示实现不同的样式。

但是,我现在的操作方式感觉有点“模糊”。
例如,请参见以下代码:

@media only screen and (max-width: 550px) {
  .pageStyleEdition{
       text-align: left;
       margin-left:0%;
       margin-right:0%;
       width: 80%;
  }
  .displayFlexStyle{
    display: flex;
    flex-direction: column;
  }
}
 @media only screen and (max-width: 290px) {
   .pageStyleEdition{
      text-align: left;
      margin-left:0%;
      margin-right:0%;
      max-width: 60%;
    }
   .displayFlexStyle{
       display: flex;
       flex-direction: column;
   }
 }


这里有很多冗余,因为我基本上只是用各个屏幕尺寸的不同宽度值一遍又一遍地重写css类,所以我真的想避免这种情况。
有什么简单的方法可以说:“如果屏幕尺寸小于X,则动态缩小宽度,使其仍适合屏幕!”?

最佳答案

请记住CSS的级联组件:例如,当您具有适用于最大宽度550px的屏幕的样式时,它也适用于最大宽度为290px的屏幕。从这个意义上讲,第二个选择器可以变得更简单:

@media only screen and (max-width: 550px) {
  .pageStyleEdition{
       text-align: left;
       margin-left:0%;
       margin-right:0%;
       width: 80%;
  }
  .displayFlexStyle{
    display: flex;
    flex-direction: column;
  }
}
 @media only screen and (max-width: 290px) {
   .pageStyleEdition{
      max-width: 60%;
    }
 }

关于css - 如何“优化” div对屏幕尺寸的宽度适应?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55592316/

10-12 12:32
查看更多