移动端如何实现1px细线的方法
更新:2020-03-10 11:38:36
人气:6690
来源:本站整理
A+
在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗,
那是因为css中的1px并不等于移动设备(物理像素)的1px。物理像素显示是1个像素代表2个像素,所以出现为2px
所以我们在移动端中为了让1px的线“看起来”苗条些,会采用一些手段。
解决办法
实现1px的线
方法一:transform
在移动端中,我们对宽度100%,1px的线进行改造,将其宽度设为200%,高度不变,之后使用transform对其缩放50%。
.line{ width:200% ; height:1px ; transform:scale(.5) ; -ms-transform:scale(.5) ; -o-transform:scale(.5) ; -webkit-transform:scale(.5) ; -moz-transform:scale(.5) ; transform-origin:top left ; }
这样苗条的线就出现了!
实现1px的边框
方法一:伪类 + transform
原始border:去掉border,设置相对定位
新border:设置 :before 或者 :after 重做 border ,并使用 transform 的 scale 缩小一半,设置绝对定位
.scale-1px{ position: relative; width:100px; height:100px; 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-radius)
缺点:
对于已经使用伪类的元素(例如clearfix),可能需要多层嵌套
方法二:-webkit-min-device-pixel-ratio + 媒体查询
media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样 .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 } }
缺点:
安卓与低版本IOS不适用
实现边框宽度为1px,宽高各为父元素
方法一:伪类 + transform
.box1 { position: relative; border: none; height: 100px; width: 100px; text-align: center; } .box1 div::after { content: ''; border:solid 1px aqua; position: absolute; left: -50%; top: -50%; bottom: -50%; right: -50%; -webkit-transform: scale(.5); transform: scale(.5); box-sizing: border-box; }
<div class="box1"> <div></div> </div>
推荐的文章
随手记
- ● 统信UOS开机指定网址全屏启动自带浏览器以及屏蔽ALT+F4关闭
- ● xshellSSH连接Linux服务器防止超时退出
- ● php8开启OpenSSL扩展库报错disabledinstallext
- ● 统信系统linux安装php时的报错libxml-2.0>=2.7.6
- ● tidb关闭sql_mode=ONLY_FULL_GROUP_BY模式
- ● windows10如何开机自动运行bat文件
- ● Win10Mysql8初始密码丢失,初始化又不显示密码
- ● UOS系统关闭防火墙或者放行tcp80端口
- ● 统信系统UOS纯命令行与图形模式界面桌面切换方法
- ● javascript(js)的小数点乘法除法问题详解
PHP经验分享
- ● PHP代码用UDP方式远程唤醒电脑让计算机开机
- ● apache下php生成验证码图片不能显示
- ● PHP使用AES加密解密示例(无偏移)
- ● Pluginmysql_native_passwordreported:''mysql_native_password'isdeprecate问题
- ● PHP实现计算CRC-16/MODBUS校验位
- ● MySQLSUM在没有符合查询条件时返回结果为空的处理办法
- ● 如何开启PHP8的JIT提升运行速度
- ● 钉钉API接口-用PHP+Curl实现获取用户信息
- ● 钉钉API接口-用PHP+Curl实现获取应用Access_Token
- ● 在PHP中使用CURL,“撩”服务器只需几行——phpcurl详细解析和常见大坑