我一直在做一些关于媒体查询的研究，但我仍然不太明白如何针对特定尺寸的设备。
我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备就好了。
我找到了一些例子:
# 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)
每个设备的断点应该是什么?
当前回答
特别小的设备~手机(< 768px) 小设备~平板电脑(>= 768px) 中型设备~台式机(>= 992px) 大型设备~桌面 (> = 1200 px)
其他回答
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.
这不是像素数的问题，而是屏幕上字符的实际大小(以毫米或英寸为单位)的问题，这取决于像素密度。 因此，“min-width:”和“max-width:”是无用的。 关于这个问题的完整解释如下: 设备像素比到底是什么?
“@media”查询会考虑像素数和设备像素比，从而产生“虚拟分辨率”，这是你在设计页面时必须考虑的问题:如果你的字体固定宽度为10px，“虚拟水平分辨率”为300 px，那么一行就需要30个字符。
特别小的设备~手机(< 768px) 小设备~平板电脑(>= 768px) 中型设备~台式机(>= 992px) 大型设备~桌面 (> = 1200 px)
对我来说最好的解决方案，检测设备是否移动:
@media (pointer:none), (pointer:coarse) {
}
Extra small devices (phones, up to 480px) Small devices (tablets, 768px and up) Medium devices (big landscape tablets, laptops, and desktops, 992px and up) Large devices (large desktops, 1200px and up) portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px portrait tablets, portrait iPad, landscape e-readers - min-width:641px tablet, landscape iPad, lo-res laptops - min-width:961px HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3 Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5 Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) - Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3 LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2 Asus Nexus 7 device-width: 601px device-height: 906px -webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1 iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2) iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1) iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2) iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)
