我一直在做一些关于媒体查询的研究，但我仍然不太明白如何针对特定尺寸的设备。
我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备就好了。
我找到了一些例子:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Or:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
每个设备的断点应该是什么?
当前回答
Twitter Bootstrap推荐的最佳断点
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
来源:https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
其他回答
不要针对特定的设备或尺寸!
一般的智慧不是针对特定的设备或大小，而是重新定义术语“断点”:
首先使用百分比或ems开发移动网站，而不是像素， 然后在一个更大的视口中尝试，注意它开始失败的地方， 重新设计布局，并添加CSS媒体查询，只是为了处理破碎的部分， 重复此过程，直到到达下一个断点。
您可以使用responsivepx.com找到“自然的”断点，如Marc Drummond所写的“断点已死”。
使用自然断点
“断点”将成为你的手机设计开始“崩溃”的实际点，即不再可用或在视觉上令人愉悦。一旦你有了一个运行良好的移动网站，没有媒体查询，你就可以不再关心具体的大小，只需添加媒体查询来处理连续较大的视口。
如果你不打算将设计固定在精确的屏幕尺寸上，这种方法就不需要针对特定的设备。设计本身在每个断点上的完整性确保了它在任何大小下都能保持不变。换句话说，如果一个菜单/内容部分或任何东西在某个大小时停止可用，为该大小设计一个断点，而不是为特定的设备大小设计一个断点。
请参阅Lyza Gardner关于行为断点的帖子，以及Zeldman关于Ethan Marcotte以及响应式网页设计如何从最初的想法演变而来的帖子。
使用语义标记
此外，DOM结构的nav, header, main, section, footer等语义越简单(避免像div class="header"嵌套内部div标签)，就越容易设计响应性，特别是通过使用CSS Grid Layout避免浮动(Sarah Drasner的网格生成器是一个很好的工具)和flexbox根据您的RWD设计计划安排和重新排序。
$xs : "extra-small";
$s : "small";
$m : "medium";
$l : "large";
$xl : "extra-large";
@mixin respond($breakpoint) {
@if($breakpoint == $xs) {
@media only screen and (min-width: 320px) and (max-width: 479px) { @content; }
}
@if($breakpoint == $s) {
@media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
}
@if($breakpoint == $m) {
@media only screen and (min-width: 768px) and (max-width: 991px) { @content; }
}
@if($breakpoint == $l) {
@media only screen and (min-width: 992px) and (max-width: 1199px) { @content; }
}
@if($breakpoint == $xl) {
@media only screen and (min-width: 1200px) { @content; }
}
}
你也可以为小于320px的场景添加一个，比如Galaxy fold
@media (max-width: 767px) {
.container{width:100%} *{color:green;}-Mobile
}
@media (min-width: 768px) {
.container{width:100%} *{color:pink } -Desktop
}
@media (min-width: 768px) and (orientation:portrait) {
.container{width:100%} *{color:yellow } -Mobile
}
@media (min-width: 1024px) {
.container{width:100%} *{color:pink } -Desktop
}
@media (min-width: 1200px) {
.container{width:1180px} *{color:pink } -Desktop
}
对我来说最好的解决方案，检测设备是否移动:
@media (pointer:none), (pointer:coarse) {
}
很简单
/* Mobile Devices */
@media (max-width: 480px) {
foo > bar {
}
}
/* Low resolution Tablets and iPads */
@media (min-width: 481px) and (max-width: 767px) {
foo > bar {
}
}
/* Tablets iPads (Portrait) */
@media (min-width: 768px) and (max-width: 1024px){
foo > bar {
}
}
/* Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
foo > bar {
}
}
/* Big boi Monitors */
@media (min-width: 1281px) {
foo > bar {
}
}
