我一直在做一些关于媒体查询的研究，但我仍然不太明白如何针对特定尺寸的设备。
我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备就好了。
我找到了一些例子:
# 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
其他回答
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.
对我来说最好的解决方案，检测设备是否移动:
@media (pointer:none), (pointer:coarse) {
}
一个额外的特性是您还可以在<link>标记的media属性中使用media-queries。
<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">
这样，浏览器将下载所有CSS资源，而不考虑介质属性。 区别在于，如果media属性的media-query被赋值为false，那么.css文件及其内容将不会被渲染阻塞。
因此，建议在<link>标签中使用media属性，可以保证更好的用户体验。
在这里你可以阅读谷歌关于这个问题的文章https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
一些工具，将帮助您自动分离您的css代码在不同的文件根据您的媒体查询
Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin
PostCSS https://www.npmjs.com/package/postcss-extract-media-query
现在最常见的是视网膜屏幕设备，换句话说:设备具有高分辨率和非常高的像素密度(但通常小于6英寸物理尺寸)。这就是为什么你需要在CSS上使用视网膜显示专门的媒体查询。这是我能找到的最完整的例子:
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
来源:CSS-Tricks网站
很简单
/* 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 {
}
}
