我一直在做一些关于媒体查询的研究,但我仍然不太明白如何针对特定尺寸的设备。

我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异,但如果有一个通用的系统可以用来针对这些设备就好了。

我找到了一些例子:

# 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)

每个设备的断点应该是什么?


当前回答

这不是像素数的问题,而是屏幕上字符的实际大小(以毫米或英寸为单位)的问题,这取决于像素密度。 因此,“min-width:”和“max-width:”是无用的。 关于这个问题的完整解释如下: 设备像素比到底是什么?

“@media”查询会考虑像素数和设备像素比,从而产生“虚拟分辨率”,这是你在设计页面时必须考虑的问题:如果你的字体固定宽度为10px,“虚拟水平分辨率”为300 px,那么一行就需要30个字符。

其他回答

对我来说最好的解决方案,检测设备是否移动:

@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网站

这只适用于那些还没有对网站进行“移动优先”设计,并正在寻找一个快速临时解决方案的人。

适用于流动电话

@media (max-width:480px){}

为平板电脑

@media (max-width:960px){}

为什么-桌面

@media (min-width:1025px){}

对于高分辨率笔记本电脑

@media (max-width:1280px){}