我正在更新我的个人网站，并给它一个全新的布局。我一直在使用 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;
}
}
这些媒体问题可能会对您有所帮助
// 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) { ... }
编写 CSS 的一个好方法是使用移动优先原则。这意味着您从最小的屏幕开始，然后逐步上升。这意味着您的级联(CSS的C部分(可以充分发挥其潜力。在你拥有小、中、大看起来不错之后，开始研究"更奇怪"的尺寸。
例如，移动横向大小：
@media only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation: landscape) {
code goes here
}
这应该使一切更易于管理。
这是我支持主要多种设备的媒体查询。
支持的设备：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仅屏幕和(最大宽度：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) {
}`