我一直在做一些关于媒体查询的研究,但我仍然不太明白如何针对特定尺寸的设备。
我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异,但如果有一个通用的系统可以用来针对这些设备就好了。
我找到了一些例子:
# 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