需要能够为不同的设备像素比值指定不同的 css。如何做到这一点
例如,
0 <= range 1 <= 1 1 < range 2 <= 1.5 1.5 < range 3 <= 2.0 2.0 < range 4
示例媒体查询看起来像
> @media (-webkit-max-device-pixel-ratio:1.0) { > .fontCls { > color: #FF00FF; // pink > font-size: 20px; > text-decoration: overline; > } > } > > @media (-webkit-min-device-pixel-ratio:1.0) and (-webkit-max-device-pixel-ratio:1.4) { > .fontCls { > color: #FF00FF; // pink > font-size: 16px; > text-decoration: line-through; > } > } > > @media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.9) { > .fontCls { > color: #FF00FF; // pink > font-size: 16px; > text-decoration: underline; > } > } > > @media (-webkit-min-device-pixel-ratio:2.0) { > .fontCls { > color: #FF00FF; // pink > font-size: 16px; > font-weight: bold; > } > }
最佳答案
您可以使用链接标签执行此操作,如下所示。将 href 更改为目标特定 CSS 的正确路径
<link rel='stylesheet' href='ss1.css' media='only screen and (-webkit-max-device-pixel-ratio: 1)'/>
<link rel='stylesheet' href='ss2.css' media='only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio: 1.4)'/>
<link rel='stylesheet' href='ss3.css' media='only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9)'/>
<link rel='stylesheet' href='ss4.css' media='only screen and (-webkit-min-device-pixel-ratio: 2)'/>
关于css - 指定多个 -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio css 媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9935314/