我一直在做一些关于媒体查询的研究，但我仍然不太明白如何针对特定尺寸的设备。
我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备就好了。
我找到了一些例子:
# 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
其他回答
一个额外的特性是您还可以在<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
$xs : "extra-small";
$s : "small";
$m : "medium";
$l : "large";
$xl : "extra-large";
@mixin respond($breakpoint) {
@if($breakpoint == $xs) {
@media only screen and (min-width: 320px) and (max-width: 479px) { @content; }
}
@if($breakpoint == $s) {
@media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
}
@if($breakpoint == $m) {
@media only screen and (min-width: 768px) and (max-width: 991px) { @content; }
}
@if($breakpoint == $l) {
@media only screen and (min-width: 992px) and (max-width: 1199px) { @content; }
}
@if($breakpoint == $xl) {
@media only screen and (min-width: 1200px) { @content; }
}
}
你也可以为小于320px的场景添加一个，比如Galaxy fold
现在最常见的是视网膜屏幕设备，换句话说:设备具有高分辨率和非常高的像素密度(但通常小于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网站
该行为在桌面上不会改变。但在平板电脑和手机上，我将导航栏展开以覆盖大的logo图像。注意:使用边缘(顶部和底部)尽可能多的你需要你的标志高度。
对于我的例子，60px的顶部和底部工作完美!
@media (max-width:768px) {
.navbar-toggle {
margin: 60px 0;
}
}
检查这里的导航栏。
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)
