Question

我正在更新我的个人网站，并给它一个全新的布局。我一直在使用SASS并将其转换为CSS。我希望我的网站能够显示在用户可能使用的任何设备（例如笔记本电脑，iPad，手机）上。目前，我一直在使用媒体查询来编写针对不同设备的SASS / CSS。由于有很多不同的欺骗对象，我想知道是否有一种更简单的方法来为每个设备编写样式而不必单独定位它们？

@media screen and (width: 375px) and (orientation: portrait) {
  button,
#submit,
a.button {
    font-size: 18px;
    width: 200px;
    height: 50px;
  }
}
@media screen and (max-width: 414px) and (orientation: portrait) {
  button,
#submit,
a.button {
    font-size: 18px;
    width: 200px;
    height: 50px;
  }
}

Answer 1

这些媒体需求可能会对您有所帮助

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Answer 2

编写CSS的一种好方法是使用移动优先原则。这意味着您从最小的屏幕开始，然后逐步向上。这意味着您的级联（CSS的C部分）可以发挥最大的潜力。小，中，大外观看起来不错之后，就可以开始使用“怪异”的尺寸了。

例如，移动景观尺寸：

@media only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation: landscape) { 

  code goes here 

}

这应该使一切都更易于管理。

为多个设备创建媒体查询的最简单方法

2 个答案: