类别：htmlcss / 日期：2022-11-25 / 浏览：261 / 评论：0
参考回答：
https://blog.csdn.net/weixin_43675871/article/details/84023447
首先，我们了解 devicePixelRatio（DPR）这个东西在 window 对象中有一个 devicePixelRatio 属性，他可以反应 css 中的像素与设备的像素比。然而 1px 在不同的移动设备上都等于这个移动设备的 1px，这是因为不同的移动设备有不同的像素密度。有关这个属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素
1px 变粗的原因：
viewport 的设置和屏幕物理分辨率是按比例而不是相同的. 移动端 window 对象有个 devicePixelRatio 属性,它表示设备物理像素和 css 像素的比例,在 retina 屏的 iphone 手机上, 这个值为 2 或 3,css 里写的 1px 长度映射到物理像素上就有 2px 或 3px 那么长
1.用小数来写 px 值
（不推荐）
IOS8 下已经支持带小数的 px 值, media query 对应 devicePixelRatio 有个查询值-webkit-min-device-pixel-ratio, css 可以写成这样通过-webkit-min-device-pixel-ratio 设置。
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
如果使用 less/sass 的话只是加了 1 句 mixin
缺点: 安卓与低版本 IOS 不适用, 这个或许是未来的标准写法, 现在不做指望
2、flexible.js
这是淘宝移动端采取的方案, github 的地址:https://github.com/amfe/lib-flexible. 前面已经说过 1px 变粗的原因就在于一刀切的设置 viewport 宽度, 如果能把 viewport 宽度设置为实际的设备物理宽度, css 里的 1px 不就等于实际 1px 长了么. flexible.js 就是这样干的.
<meta name=”viewport”>里面的 scale 值指的是对 ideal viewport 的缩放, flexible.js 检测到 IOS 机型, 会算出 scale = 1/devicePixelRatio, 然后设置 viewport
3、伪类+transform 实现
对于解决 1px 边框问题，我个人觉得最完美的解决办法还是伪类+transform 比较好。
原理：是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
media query通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x 图，为大屏幕手机设置@3x 图，通过媒体查询就能很方便的实现。但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media
方便应用广泛 适用于 pc 端 手机页面，通常做自适应布局时 我们比较常用。
缺点：相对于代码要重复很多，得知道设备的宽度，手机的分辨率很多所以麻烦了点，不过性能方面肯定最高； 可能存在闪屏的问题
@media 处理手机和 pc 端界面兼容的问题，在 IE 上的访问出现问题，百度方法，找找两种，一种是 respond.js，另一种是css3-mediaqueries
http://blog.csdn.net/small_tu/article/details/47317453
版权声明 : 本文未使用任何知识共享协议授权，您可以任何形式自由转载或使用。
发表评论 / 取消回复