我一直在做一些关于媒体查询的研究，但我仍然不太明白如何针对特定尺寸的设备。
我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备就好了。
我找到了一些例子:
# 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
其他回答
这不是像素数的问题，而是屏幕上字符的实际大小(以毫米或英寸为单位)的问题，这取决于像素密度。 因此，“min-width:”和“max-width:”是无用的。 关于这个问题的完整解释如下: 设备像素比到底是什么?
“@media”查询会考虑像素数和设备像素比，从而产生“虚拟分辨率”，这是你在设计页面时必须考虑的问题:如果你的字体固定宽度为10px，“虚拟水平分辨率”为300 px，那么一行就需要30个字符。
特别小的设备~手机(< 768px) 小设备~平板电脑(>= 768px) 中型设备~台式机(>= 992px) 大型设备~桌面 (> = 1200 px)
因为有许多不同的屏幕尺寸总是在变化，最有可能总是在变化，最好的方法是根据你的设计来设置断点和媒体查询。
要做到这一点，最简单的方法是抓取你完成的桌面设计，并在浏览器中打开它。慢慢缩小屏幕，使其更窄。观察设计什么时候开始“断裂”，或者看起来可怕和局促。此时需要一个带有媒体查询的断点。
通常为台式机、平板电脑和手机创建三组媒体查询。但是，如果你的设计在这三个方面都很好，为什么要麻烦地添加三个不同的不必要的媒体查询呢?根据需要来做!
这不仅仅是关于分辨率，你还需要找到设备的DPR: whatismyscreenresolution “设备像素比(DPR)是设备制造商提供的一个数字，用于HiDPI(每英寸高点数)或Retina(苹果的商标)显示器。”
媒体查询示例:(最小分辨率:3.0dppx)
I have used this site to find the resolution and developed CSS per actual numbers. My numbers vary quite a bit from the above answers, except that the my CSS actually hits the desired devices. Also, have this debugging piece of code right after your media query e.g: @media only screen and (min-width: 769px) and (max-width: 1281px) { /* for 10 inches tablet screens */ body::before { content: "tablet to some desktop media query (769 > 1281) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */ position: absolute; top: 0; left: 0; right: 0; z-index: 99; } } Add this debugging item in every single media query and you will see what query has being applied.
