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;
}
也能实现 但过于麻烦 使用和维护及其不方便