移动端1px边框的实现
来源:互联网 发布:发布淘宝优惠券的工作 编辑:程序博客网 时间:2024/05/16 05:11
1.为什么出不来1px?
简而言之:css的1px只是一个抽象的单位,并非实际设备中的1px。
关于retina屏:
我们知道现在iphone大多数型号都用上了retina屏,而retina屏的分辨率相较于普通屏幕增加了一倍,也就是说原来1个像素宽度的区域内可以塞进2个像素了。我们css写的1px是一个概念像素,在retina屏的实际设备上占了2px的位置。
而对于手机屏幕整体来说,一个标注了750宽的手机(iPhone6)在css中只需要375px就能表示。
2.如何在手机上写出1px
网上其实有人列了非常多的方案,有用transform的、有用图片的、有用canvas的、还有用0.5px的……从操作简易性来看,用transform的方案是比较简单的,而且适配也比较容易(0.5px的方案安卓不支持)。
原理:写一条1px的线,然后 transform:scaleY(0.5)或scaleX(0.5),就能够将retina上显示的2px缩小为实际屏幕中的1px。
3.微信WeUI上1px边框的实现代码
.weui_grid::after { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; border-bottom: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
说明:在需要1px边框的元素上使用伪类选择器(:after,:before)生成一个内容为空,高度为1px的元素,然后进行绝对定位,最后通过transform:scaleY(0.5)对Y轴进行缩放。如果需要1px的左右边框,将width设置为1px,height设置为100%,边框选择border-left或border-right,对X轴进行缩放即可。
4.使用min-device-pixel-ratio媒体功能自主查询
.border-1px::after{ content: " "; position: absolute; top:50px; left:0; width: 100%; height: 1px; border-bottom: 1px solid #000;}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){ .border-1px::after{ -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }}
阅读全文
0 0
- 移动端1px边框的实现
- 移动端1px边框的实现
- 移动端实现1px的边框
- 移动端1px边框实现
- 移动端1px边框实现
- 移动端实现1px边框
- 移动端Retina屏实现1px的边框
- 移动端1px边框的解决方案
- 移动端 1px边框
- css实现移动端1px边框怎么解决
- 面试题:移动端1px边框的样式
- 移动端1px边框解决方案
- 移动端1px边框 -- 伪元素
- 移动端边框1px处理
- 移动端1px像素边框
- 移动端1px实现
- 解决CSS移动端1px边框问题
- CSS/移动端添加真正1PX边框线
- char *string="xxxxxxxxx" 与 char string[]="xxxxx"的区别
- Oracle之分区表效率与普通表比较
- 电路分析-第四章 分解方法及单口网络
- Ubuntu为安装的软件添加启动图标
- 股票量化分析(11)——第二个策略(5日移动均线、双均线、MACD策略)
- 移动端1px边框的实现
- 如何 在Spring MVC中 使用多个Spring和MyBatis的xml配置文件(多模块配置)
- 仟滋佰味商城
- MySQL概述
- 在ubuntu V16.04 中 编译树莓派2 linu内核
- 用开源软件将shp文件导入MySQL,并通过geoserver发布地图服务
- KMP算法中next数组和nextval数组值的推导
- Unity_通讯案例_Udp
- 跨域解决方案大全