html如何解决1px显示,如何解决1px问题

为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句

这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的

关于1px问题

1、0.5px边框

在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Connor 讲到关于“retina

hairlines”(retina 极细的线)：在retina屏上仅仅显示1物理像素的边框，开发者应该如何处理呢。

他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框：问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，还有 Android 设备。

解决方法

解决方案1是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给html标签元素添加个class。

if (window.devicePixelRatio && devicePixelRatio >= 2) {

var testElem = document.createElement('div');

testElem.style.border = '.5px solid transparent';

document.body.appendChild(testElem); }

if (testElem.offsetHeight == 1) {

document.querySelector('html').classList.add('hairlines'); }

document.body.removeChild(testElem); }

div {

border: 1px solid #bbb;

}

.hairlines div {

border-width: 0.5px;

}

解决方法2利用css中的transform的缩放属性解决 推荐使用

解决1px边框问题

.line {position:relative;}

.line:after {width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;box-sizing:border-box;}

.list {width:100%;margin:auto;list-style:none;padding:0;}

.list:after {border:1px solid #ccc;border-radius:10px;}

.item {padding:10px;}

.item:after {border-bottom:1px solid #ccc;}

.item:last-child:after {display:none;}

• item001
• item002
• item003
• item004
• item005
• item006
• item007
• item008
• item009
• item010

这个主要利用after伪类进行缩放。调用公共class，还是很方便的。

>解决方案3background-image 通过设置一张背景图

.border {

background-image:linear-gradient(180deg, red, red 50%, transparent 50%),

linear-gradient(270deg, red, red 50%, transparent 50%),

linear-gradient(0deg, red, red 50%, transparent 50%),

linear-gradient(90deg, red, red 50%, transparent 50%);

background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;

background-repeat: no-repeat;

background-position: top, right top, bottom, left top;

padding: 10px;

}

也能实现 但过于麻烦 使用和维护及其不方便