CSS媒体查询,像素密度,桌面和移动设备

Question

情况:
我有5个CSS文件:

• base.css,其中一些样式适用于所有地方

• 339px.css,宽度可达339px

• 639px.css,宽度最大为639px

• 999px.css和

• bigscreen.css适用于宽度超过999像素的任何东西

代码:

<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.54cm)的任何设备上都能完美运行.然而,最近许多显示设备的像素密度远高于此,因此当339px.css合适时,它们应用于639px.css.这是一个问题,因为内容看方式太小.

另请注意,我不能使用JavaScript和台式计算机schould总是根据宽度获取相应的css文件,无论方向如何.

我想要实现的目标:

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

基本上不是css像素,我想要一个相对于设备像素密度的单位(桌面,平板电脑,智能手机,4k显示器,"Retina"显示器,你明白了)并且可以同时使用所有主流浏览器移动和桌面平台.

与此同时,我还需要为旧版浏览器支持css像素.

这给了我一个令人头疼的问题.据我所知,您可以使用device-pixel-ratio,但我没有成功地在某些时候(两个css文件处于活动状态的区域,例如339px.css和639px.css)中使css文件"重叠".

我没办法.我已经试过的组合min-width,max-width,device-pixel-ratio,orientation: portrait/landscape媒体查询,但这次失败,因为这样的事实:台式机应该忽略方向.到目前为止,即使我忽略了浏览器支持要求,我也无法在设备上获得积极的结果.

Answer 1

将此添加到您的head:

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

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