处理移动端边框1px问题

为什么在移动端会看到边框1px的线比较粗，原因不多说，直接贴出解决的代码

<style>　

.list li{line-height: 40px; position: relative;}
.list li:after{position: absolute;bottom: -1px;left: 0;content: ‘‘;width: 100%;height: 1px;border-top: #EC971F 1px solid;-webkit-transform:scaleY(0.5);}

</style>

时间： 2024-11-07 14:50:55

处理移动端边框1px问题的相关文章

移动端边框1px的实现

查看京东的移动端1px实现原理,用的是:after和css3的scale(0.5)缩放. border-right fr:after{ height:100%; content:' '; width:1px; border-right:1px solid #f0f0f0; position:absolute; top:0; right:-1px; transform:scaleX(0.5); -webkit-transform:scaleX(0.5); z-index:10; } border-

移动端的1px边框问题

最近在做一个移动端项目,涉及到1像素问题其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别.物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用window.devicePixelRatio来获取,也可以用媒体查询的-webkit-min-device-pixel-ratio来获取,具体的比例差距由设备决定如何解决这个问题才是重点,下面集中提出解决方案: 1.媒体查询利用设备像素比缩放,设置小数像素 css可以写成这样: .border{b

移动端边框1像素的问题与解决方法

移动端1px变粗的原因为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个'px'的含义是不一样的. 移动端html的header总会有一句 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和

移动端比1px还小的border

巧用border 在移动端经常出现border,细边框但有的时候产品大大1px甚至乎会觉得不够细那么要如何写出比1px还要小的border下面是代码希望对大家有所帮助 .thinner-border { position: relative; width: 1px; margin:14px 0; height: 20px; } .thinner-border:after { content: ''; position: absolute; width: 500%; height: 500%

table边框1px

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

stylus 移动端边框1像素问题解决方案

借鉴前端移动框架yo 1 border($border-width=1px, $border-color=#ccc, $border-style= solid, $radius= null) { 2 // 为边框位置提供定位参考 3 position: relative; 4 if $border-width == null { 5 $border-width: 0; 6 } 7 border-radius: $radius; 8 &::after { 9 // 用以解决边框layer遮盖内容

解决移动端上1px的问题

一.伪类 + transform 基于 media查询判断不同的设备像素比对线条进行缩放: .border_1px:before{ content: ''; position: absolute; top: 0; height: 1px; width: 100%; background-color: #000; transform-origin: 50% 0%; } @media only screen and (-webkit-min-device-pixel-ratio:2){ .borde

移动端屏幕适配解决方案

因原在做移动端适配过程中,一直都是应用淘宝的flexible高清方案解决,也没有认真的去研究过源码.这几天又看到一些普通的适配方案,于是把两者源码放在一起比较,发现高清方案是通过动态的获取了当前设备的dpr值,然后根据dpr值的大小来设定手机的视口的缩放比例,从而实现高清.比如:dpr=2时,设定initial-scale = 0.5 ; dpr=3时 ,设定initial-scale = 0.333 : 一.手机端viewport详解 <meta name="viewport"

移动端布局方法rem

REM REM这个单位,会根据html的font-size大小进行转换. html{font-size:100px;} p{padding-top:.5rem;} .5rem = 50px / 100 转换后p的padding-top就是50px了.只要我们进行适当的计算,当前屏幕的宽度,html的font-size是多少px就OK了. 如何计算当前html的font-size值比如,我们拿到的设计稿是750px,那就设置成当屏幕宽度是750的时候,html的font-size就是100px(