我一直在做一些关于媒体查询的研究，但我仍然不太明白如何针对特定尺寸的设备。
我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备就好了。
我找到了一些例子:
# 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)
每个设备的断点应该是什么?
当前回答
一个额外的特性是您还可以在<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
其他回答
如果你想瞄准一个设备，那么只需要写min-device-width。例如:
为iPhone
@media only screen and (min-device-width: 480px){}
为平板电脑
@media only screen and (min-device-width: 768px){}
这里有一些不错的文章:
如何使你的网站适合苹果iPad CSS3媒体查询
这只适用于那些还没有对网站进行“移动优先”设计，并正在寻找一个快速临时解决方案的人。
适用于流动电话
@media (max-width:480px){}
为平板电脑
@media (max-width:960px){}
为什么-桌面
@media (min-width:1025px){}
对于高分辨率笔记本电脑
@media (max-width:1280px){}
这不是像素数的问题，而是屏幕上字符的实际大小(以毫米或英寸为单位)的问题，这取决于像素密度。 因此，“min-width:”和“max-width:”是无用的。 关于这个问题的完整解释如下: 设备像素比到底是什么?
“@media”查询会考虑像素数和设备像素比，从而产生“虚拟分辨率”，这是你在设计页面时必须考虑的问题:如果你的字体固定宽度为10px，“虚拟水平分辨率”为300 px，那么一行就需要30个字符。
特别小的设备~手机(< 768px) 小设备~平板电脑(>= 768px) 中型设备~台式机(>= 992px) 大型设备~桌面 (> = 1200 px)
@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
}
