.net电商网站开发,专业网页设计价格,wordpress后台登录显示500,广西最新一批违法领导1px 问题指的是#xff1a;在一些 Retina屏幕 的机型上#xff0c;移动端页面的 1px 会变得很粗#xff0c;呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描述#xff1a;
window.devicePix…1px 问题指的是在一些 Retina屏幕 的机型上移动端页面的 1px 会变得很粗呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描述
window.devicePixelRatio 设备的物理像素 / CSS像素。
打开 Chrome 浏览器启动移动端调试模式在控制台去输出这个 devicePixelRatio 的值。这里选中 iPhone6/7/8 这系列的机型输出的结果就是2 这就意味着设置的 1px CSS 像素在这个设备上实际会用 2 个物理像素单元来进行渲染所以实际看到的一定会比 1px 粗一些。
解决1px 问题的三种思路
思路一直接写 0.5px
如果之前 1px 的样式这样写
border:1px solid #333
可以先在 JS 中拿到 window.devicePixelRatio 的值然后把这个值通过 JSX 或者模板语法给到 CSS 的 data 里达到这样的效果这里用 JSX 语法做示范
div idcontainer data-device{{window.devicePixelRatio}}/div
然后就可以在 CSS 中用属性选择器来命中 devicePixelRatio 为某一值的情况比如说这里尝试命中 devicePixelRatio 为2的情况
#container[data-device2] {border:0.5px solid #333
}
直接把 1px 改成 1/devicePixelRatio 后的值这是目前为止最简单的一种方法。这种方法的缺陷在于兼容性不行IOS 系统需要8及以上的版本安卓系统则直接不兼容。
思路二伪元素先放大后缩小
这个方法的可行性会更高兼容性也更好。唯一的缺点是代码会变多。
思路是先放大、后缩小在目标元素的后面追加一个 ::after 伪元素让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上然后把它的宽和高都设置为目标元素的两倍border值设为 1px。接着借助 CSS 动画特效中的放缩能力把整个伪元素缩小为原来的 50%。此时伪元素的宽高刚好可以和原有的目标元素对齐而 border 也缩小为了 1px 的二分之一间接地实现了 0.5px 的效果。
代码如下
#container[data-device2] {position: relative;
}
#container[data-device2]::after{position:absolute;top: 0;left: 0;width: 200%;height: 200%;content:;transform: scale(0.5);transform-origin: left top;box-sizing: border-box;border: 1px solid #333;}
}
思路三viewport 缩放来解决
这个思路就是对 meta 标签里几个关键属性下手
meta nameviewport contentinitial-scale0.5, maximum-scale0.5, minimum-scale0.5, user-scalableno
这里针对像素比为2的页面把整个页面缩放为了原来的1/2大小。这样本来占用2个物理像素的 1px 样式现在占用的就是标准的一个物理像素。根据像素比的不同这个缩放比例可以被计算为不同的值用 js 代码实现如下
const scale 1 / window.devicePixelRatio;
// 这里 metaEl 指的是 meta 标签对应的 Dom
metaEl.setAttribute(content, widthdevice-width,user-scalableno,initial-scale${scale},maximum-scale${scale},minimum-scale${scale});
这样解决了但这样做的副作用也很大整个页面被缩放了。这时 1px 已经被处理成物理像素大小这样的大小在手机上显示边框很合适。但是一些原本不需要被缩小的内容比如文字、图片等也被无差别缩小掉了。
