CSS媒体查询，像素密度，桌面和移动设备 [英] CSS media queries, pixel density, desktop and mobile devices

问题描述

情况：

我有5个CSS文件：

$ b $



• 639px.css，宽度最大为639像素




• 999px.css和

  $ b

• bigscreen.css适用于宽度超过999px的任何内容

代码：

 < link rel =stylesheettype =text / cssmedia =alltype =text / csshref =css / base.css/> 
< link rel =stylesheettype =text / cssmedia =screen and（min-width：0px）and（max-width：339px）href =css / 339px.css > 
< link rel =stylesheettype =text / cssmedia =screen and（min-width：340px）and（max-width：639px）href =css / 639px.css > 
< link rel =stylesheettype =text / cssmedia =screen and（min-width：640px）and（max-width：999px）href =css / 999px.css > 
< link rel =stylesheettype =text / cssmedia =screen and（min-width：1000px）href =css / bigscreen.css/> 
  

这是很好的，并且在任何设备上执行完美的1 css像素等于1/96英寸（2.54cm）。然而，最近，许多显示设备具有比这更高的像素密度，因此它们应用例如639px.css当339px.css将是适当的。这是一个问题，因为内容看起来方式太小。

还要注意，我不能使用JavaScript和台式电脑schould总是得到相应的css文件根据宽度，不管方向。

我要实现的目标：

• 339px.css适用于以下任何设备：
  
  
  
  
  • 宽度<= 339像素
  
  
  
  

Bascially而不是css像素，我想要一个单位，相对于设备的像素密度（桌面，平板电脑，智能手机，4k显示，Retina显示，你得到的想法）和

与此同时，我还需要为旧版浏览器提供css像素的回退。

这给了我一个头痛的问题。据我所知，你可以使用 device-pixel-ratio ，但我没有成功地使css文件重叠在某一点两个css文件是活动的，例如339px.css和639px.css）。

我在我的智慧结束。我已经尝试了 min-width ， max-width ， device-比例， orientation：portrait / landscape 媒体查询，但由于桌面应忽略方向而失败。

解决方案

将此添加到设备上即可头：

< meta name =viewportcontent = device-width，initial-scale = 1.0>

width = device-width 考虑像素密度，因此具有640px宽和2.0像素密度的真实分辨率的设备将具有320px的浏览器视口宽度。初始比例确保移动浏览器不会尝试缩放以适应任何内容（对于真正的流体响应网站）。

Situation :
I have 5 CSS files:

• base.css with some styles that apply everywhere

• 339px.css for widths up to 339px

• 639px.css for widths up to 639px

• 999px.css and

• bigscreen.css for anything above 999px width

Code :

<link rel="stylesheet" type="text/css" media="all" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:    0px) and (max-width: 339px)" href="css/339px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:  340px) and (max-width: 639px)" href="css/639px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:  640px) and (max-width: 999px)" href="css/999px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="css/bigscreen.css" />

This is all well and good and performs perfectly on any device where 1 css pixel equals 1/96 inch (2.54cm) on the device screen. Recently, however, many display devices have pixel densities much higher than this, so they apply, say, the 639px.css when the 339px.css would be appropriate. This is a problem, as the contents look way too small.

Also note that I cannot use JavaScript and desktop computers schould always get the corresponding css file according to width, regardless of orientation.

What I am looking to achieve:

• 339px.css for any device with:
  
  • a width <=339px
  • a high resolution but a small screen (for instance my android smartphone with 1280x720 but a 5.7" screen) and in portrait orientation.

Bascially instead of css pixel, I'd want a unit that is relative to the pixel density of the device (Desktop, tablet, smartphone, 4k displays, "Retina" displays, you get the idea) and works with all major browsers on both mobile and desktop platforms.

At the same time, I also need a fallback to css pixels for older browsers.

It has given me a major headache to achive this. As far as I understand, you could use the device-pixel-ratio, but I have not succeeded in not making the css files "overlap" at some point (an area where two css files are active, for instance 339px.css and 639px.css).

I am at my wits end. I have tried a combination of min-width, max-width, device-pixel-ratio, orientation: portrait/landscape media query, but this failed due to the fact that desktops should ignore the orientation. So far I couldn't get a positive result across devices, even if I disregarded the browser support requirement.

解决方案

Add this to your head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width takes pixel density into account, so a device with true resolution of 640px width and 2.0 pixel density will have a browser viewport width of 320px. Initial scale ensures mobile browsers do not attempt to zoom to fit anything (for true fluid responsive sites).

这篇关于CSS媒体查询，像素密度，桌面和移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！