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

Question

我正在更新我的个人网站并为其提供全新的布局。我一直在使用 SASS 并将其转换为 CSS。我希望我的网站显示在用户可能使用的任何设备上（即笔记本电脑、iPad、移动设备 phone）。目前，我一直在编写我的 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 部分）发挥了最大的潜力。在小号、中号和大号看起来不错之后，开始研究 "weirder" 尺寸。

例如，移动横向尺寸：

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

  code goes here 

}

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

Answer 3

这是我支持主要多种设备的媒体查询。

Supported Devices: Moto G4, Galaxy S5, Pixel 2, Pixel 2 XL, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPhone X, iPad, iPad Pro, Surface Duo, Galaxy Duo

`@media only screen and (max-width: 280px){

}
@media only screen and (min-width: 281px) and (max-width: 320px){
    
}

@media only screen and (min-width: 321px) and (max-width: 360px){

}

 @media only screen and (min-width: 361px) and  (max-width: 500px){
 
}

 @media only screen and (min-width: 501px) and  (max-width: 800px){
 
 
}
@media only screen and (min-width: 801px) {
 
}`

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

Easiest way to create media queries for multiple devices

css

mobile

sass

media-queries