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

问题描述

情况:
我有 5 个 CSS 文件:

Situation :
I have 5 CSS files:

• base.css 带有一些适用于任何地方的样式

• base.css with some styles that apply everywhere

339px.css，宽度最大为 339px

339px.css for widths up to 339px

639px.css，宽度最大为 639px

639px.css for widths up to 639px

999px.css 和

999px.css and

bigscreen.css 用于宽度超过 999 像素的任何内容

bigscreen.css for anything above 999px width

代码:

<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" />

这一切都很好，并且在设备屏幕上 1 css 像素等于 1/96 英寸(2.54 厘米)的任何设备上都能完美运行.然而，最近许多显示设备的像素密度远高于此，因此当 339px.css 合适时，它们会应用 639px.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.

另外请注意，我不能使用 JavaScript，台式机应该始终根据宽度获取相应的 css 文件，无论方向如何.

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

我希望实现的目标:

• 339px.css 适用于任何设备:
  
  • 宽度 <=339px
  • 分辨率高但屏幕小(例如我的 android 智能手机，分辨率为 1280x720，但屏幕为 5.7 英寸)且为纵向.

  基本上，我想要一个与设备像素密度相关的单位(台式机、平板电脑、智能手机、4k 显示器、Retina"显示器，你懂的)并且适用于所有主要设备移动和桌面平台上的浏览器.

  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.

  同时，我还需要为旧浏览器回退到 css 像素.

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

  实现这一目标让我非常头疼.据我了解，您可以使用 device-pixel-ratio，但我没有成功地使 css 文件在某些​​时候不重叠"(两个 css 文件处于活动状态的区域，例如 339px.css 和 639px.css).

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

  我已经无能为力了.我尝试了 min-width、max-width、device-pixel-ratio、orientation: Portrait/landscape<的组合/code> 媒体查询，但由于桌面应忽略方向而失败.到目前为止，即使我不考虑浏览器支持要求，我也无法在各种设备上获得积极的结果.

  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.

  推荐答案

  将此添加到您的 head:

  width=device-width 考虑了像素密度，因此真正分辨率为 640px 宽度和 2.0 像素密度的设备的浏览器视口宽度为 320px.初始比例可确保移动浏览器不会尝试缩放以适应任何内容(对于真正流畅的响应式网站).

  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屋！