写点什么

移动端 1px 解决方案

发布于: 33 分钟前
移动端1px解决方案

在移动端 web 页面中,1px 的问题是一个常见的问题,总结一些解决移动端 web 的 1px 方法以及对应 API 介绍

border-image

border-image CSS 属性允许在元素的边框上绘制图像

语法

border-image: image-source image-height image-width image-repeat复制代码
复制代码

设置 1px

.border-top {  border-width: 1px;  border-image: url('xxx') 2 repeat;}复制代码
复制代码

使用 border-image 时,其将会替换掉border-style 属性所设置的边框样式。虽然规范要求使用 border-image时边框样式必须存在,但一些浏览器可能没有实现这一点。

特别注意,若 border-image-source(此值可用 border-image-source 或 border-image 简写设置) 的值为 none 或者图片不能显示,则将应用 border-style

优点:兼容性好

缺点:灵活性差,每次更改都需要更换图片

linear-gradient

利用渐变实现 1px,50%黑色,50%透明

.border-top {  background: linear-gradient(1deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat;}复制代码
复制代码

优点:实现简单,颜色可控

缺点:无法实现圆角,有兼容性问题(现在兼容性问题基本可忽略)

box-shadow

box-shadow 属性用于在元素的框架上添加阴影效果,可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

在使用 box-shadow 时,需要注意不同数量的属性值代表不同的含义

  • 如果只存在两个属性值,会将其作为offerset-xofferset-y

  • 如果存在三个属性值,会将前两位作为offerset-xofferset-y,第三个值作为blur-radius

  • 如果存在四个属性值,第四个将会作为spread-radius

.border-top {  box-shadow: 0px -1px 1px -1px rgb(0 0 0 / 50%);}复制代码
复制代码

优点:实现简单,颜色可控

缺点:颜色控制较为难拿捏,会有阴影描边出现

伪元素 + transfrom

如果直接对 DOM 使用transfrom进行缩放,会连带着内部的所有元素被缩放,影响原有的布局结构和字体大小,使用伪元素遍可以避免这个问题,因为伪元素::after::before是独立于当前元素,可以单独对其缩放而不影响元素本身的缩放

.border-top {  position: relative;}
.border-top::after { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid #000; transform: scaleY(.5); transform-origin: left top;}复制代码
复制代码

由于现在市面存在多种DPR设备,上述代码不能很好的兼容,因此需要搭配媒介查询使用,针对不同的DPR设备进行缩放

@media screen and (-webkit-min-device-pixel-ratio: 2) {    .border-top::after {         /* 省略无关代码 */        transform: scaleY(.5);    }}
@media screen and (-webkit-min-device-pixel-ratio: 3) { .border-top::after { /* 省略无关代码 */ transform: scaleY(1 / 3); }}
复制代码

最后

如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163 相互学习,我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点 star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激 !

用户头像

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步,能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

评论

发布
暂无评论
移动端1px解决方案