移动端1像素边框问题
来源:互联网 发布:mac gradle 安装 编辑:程序博客网 时间:2024/05/16 06:19
这几天忙着做一个手机端的web页面,然后要嵌入到APP之中,UI设计师看我做的页面发现一个问题,就是边框线不止1像素,跟他设计的不符,我很纳闷明明就是写的时候是1px为啥显示出来就不一样呢?
其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比,在devicePixelRatio = 2 的手机浏览器中1px可能显示的是2像素的线,同理devicePixelRatio =3 的手机浏览器中1px可能显示的是3像素的线。
然后发现网上的解决方案还是挺多的,但是比较全面解决问题有2种
1、viewport + rem 实现
关于REM布局,可以参考文章《移动端H5页面之iphone6的适配》
优点:
所有场景都能满足
一套代码,可以兼容基本所有布局
缺点:
老项目修改代价过大,只适用于新项目
嵌入webview中去,页面样式会乱套(在浏览器中显示正常),可能我写法有问题,需要重新考量
<script> var viewport = document.querySelector("meta[name=viewport]"); //下面是根据设备像素设置viewport if (window.devicePixelRatio == 1) { viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'); } if (window.devicePixelRatio == 2) { viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no'); } if (window.devicePixelRatio == 3) { viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no'); } var docEl = document.documentElement; var fontsize = 10 * (docEl.clientWidth / 320) + 'px'; docEl.style.fontSize = fontsize; </script>
2、伪类 + transform 实现
对于老项目,有没有什么办法能兼容1px的尴尬问题了,个人认为伪类+transform是比较完美的方法了。
原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。
优点:
所有场景都能满足
支持圆角(伪类和本体类都需要加border-radius)
缺点:
对于已经使用伪类的元素(例如clearfix),可能需要多层嵌套
单条border样式设置:
.scale-1px{ position: relative; border:none;}.scale-1px:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0;}
四条boder样式设置:
.scale-1px{ position: relative; margin-bottom: 20px; border:none;}.scale-1px:after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top;}
其他,如使用border-image实现、使用background-image实现、多背景渐变实现、使用box-shadow模拟边框就不一一赘述啦
- 移动端1像素边框问题
- 移动端1像素边框问题的解决方案
- 移动端一像素的边框问题
- 移动端1像素的边框
- 移动端1px像素边框
- 移动端一像素边框
- 移动web 1像素边框
- 移动端(手机)1像素边框真正实现
- 移动端(手机)1像素边框实现方法
- 在移动端实现一像素边框
- 1px(1像素)边框问题
- 移动端一个像素问题
- 移动1像素的问题
- 移动端(手机)实现1像素下边框的方法
- 1像素边框表格
- table边框1像素
- 边框导航右边框双倍像素问题
- 移动端1像素实现
- 交换机应用之端口模式(access、trunk和hybird)、是否标记(tag、untag)、端口缺省vlan(pvid、native id)
- 将不在pom文件中的jar包打包WEB-INF/lib目录下
- 机器学习中常用的Numpy函数
- 7月16日|C语言|volatile用法及static用法及printf返回值研究
- 一位资深程序员大牛给予Java初学者的学习建议
- 移动端1像素边框问题
- UCML开发平台使用心得
- Java--反射的逐步理解
- 01-指令ng-app
- WebService cxf 与 ssm框架的整合
- 关于git
- 重建二叉树
- 最小均方算法
- 常用正则