【移动端1px细线的处理】的更多相关文章

移动端1px细线解决方案总结

现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在那个版本没上线就迭代掉了,后面的版本针对这个问题做了些尝试, 这里总结下1px细线的处理方法 移动端1px变粗的原因 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句 <meta name="…

移动端1px细线解决方案--利用transform缩放方式

移动端1px会显示为2px; 解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放 1. 上边框 相当于 border-top <div class="bordert1px"></div> css /*top*/ .bordert1px { position: relative; } .bordert1px:before { content: " "; position: absolute; left:; top:;…

移动端1px细线的处理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用transform实现1px的细线</title> <style type="text/css"> .line{ position: relative; margin-top: 20px; border:none; } .…

移动端1px细线问题

1可以用伪类实现 .con{position: relative;.con:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #d9d9d9; color: #d9d9d9; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scal…

移动端高清适配方案（解决图片模糊问题、1px细线问题）

本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >>>>物理像素.设备独立像素和设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的.在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但…

移动端1px边框

问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 border 去掉,然后利用:before或者:after重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位 单条边框: .hairlines li{position: relative; border:none; } .ha…

手机端1px细线公共类

手机端1px细线公共类 .borderBottom1px{ position: relative; } .borderBottom1px:after{ content: ""; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid #e3e3e3; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0; } 手机端1px细线公共…

移动端1px边框伪类宽高计算

移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高100%会出现问题,那么如何解决? 请看下面代码: after:{ border: 1px solid #c1c0c0; height: 303%; content: ''; width: 303%; position: absolute; bottom: 0; right: 0; transform…

目前解决移动端1px边框最好的方法

在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina Display(视网膜屏幕)的概念,在 iPhone4 使用的视网膜屏幕中,把 2x2 个像素当 1 个物理像素使用,即使用 2x2 个像素显示原来 1 个物理像素显示的内容,从而让 UI 显示更精致清晰,这 2x2 个像素叫做逻辑像素.像这种像素比(像素比(即dpr)＝ 物理像素 / 逻辑像素)…

移动端实1px细线方法

前言 在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗, 那是因为css中的1px并不等于移动设备(物理像素)的1px.物理像素显示是1个像素代表2个像素,所以出现为2px 所以我们在移动端中为了让1px的线“看起来”苗条些,会采用一些手段. 解决办法 实现1px的线 方法一:transform 在移动端中,我们对宽度100%,1px的线进行改造,将其宽度设为200%,高度不变,之后使用transform对其缩放50%. .line{ width:200% ; h…