无极3彩票app下载-无极3官方网站-无极娱乐

    
当前位置:首页少数派正文
admin

过敏,移动端1px边框的问题

  2周前 (02-14)     221     0
简介:前言应该感觉不止一次会被涉及到关于1px的问题,其主要触发的场景就是高分屏上会把1px宽的边框显示成2px,在dpr为3的设备上,显示边框为3px....

前vp言

应该感觉不止一次会被涉及到关于1px的问题,其主要触发的场景便是高分屏上会把1px宽的边框显现成2px,在dpr为3的设备上,显现边框为3px.

为了防止咱们少走弯路,这儿简略带一下网上说到的几种计划,包含下面的:

  • 边框的图片,bordeonionr-image
  • 背景图片
  • 边框的暗影
  • 设置viewport的meta特点(不主张使跑车品牌用)

引荐计划:

1 transform

针对边框设置1px之后,在运用transform,需求结合JavaScript代码,用来判别是否是Retina.

.hairlines li{ position: rel高仁彬ative; border:none; } 
.hairlines li:after{
content: '';
position: absolute; left: 0; anal
background: #000; evilwidth: 100%; height: 1px;
transform: scaleY(0.5); transform-origin: 0 0; }

2 PostCSS的postcss-write-svg

运用PostCSS的插过敏,移动端1px边框的问题件是不是比咱们修正图片要来得简略与便利。

运用PostCSS的postcss-write-莫匹罗星软膏svg插件,最终编译完会变成一背景图片款式。比方:

@svg square { 
@rect { fill: 真实男子汉第二季var(--color, black); width: 100%; height: 100%; } }
#example {
background: white svg(square param(--color #00b1ff)); }

3 0.5px

检查是否兼容设置0.5px的计划,进行兼容性测验,支撑就设置这个款式,结合Flexible阿尔及利亚计划。

if (dpr >= 2) {
var f招魂2akeBody = document.cre上环ateElement('body')
var testElement = document.createElem为你写诗ent('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHbaidieight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}

4 伪元素 tra过敏,移动端1px边框的问题nsform、border-image

京东的1px的计划,边框均是伪元素完成的,但不是一切的款式有完成。

// transform 计划
@media only screen and (-过敏,移动端1px边框的问题webkit-min-device-pixel-ratio: 2){
.option:after {
-webkit-transform: scale(.5);
-webkit-transform-origin幼稚园杀手谋杀: 0 0;
bottom: -100%;
right: -100%;
}
}
option:after {
content: "";
宁乡天气预报display: blo过敏,移动端1px边框的问题ck;
border: 1px solid #ddd;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
// border-image计划
.jd-header-bar {
过敏,移动端1px边框的问题position: relative;
border-width: 0 0 1px;
border-bottom: 1px solid #bfbfbf;
-webkit-border-image: url("data:imag恩啊e过敏,移动端1px边框的问题/gif;base64,R) repeat-x 0 0;
background-size: 着衣100% 44px
}

5 box-shadow

天锚的计划:box-shadow

.templates-item-wrapper {
width: 92%;
margin: 0 auto;
/* -we宁海bkit-box-shadow: 0 1px 2px 0 rgba(157,157,157,.5)过敏,移动端1px边框的问题; */
-moz-box-shadow: 0 1px 2px 0 rgba(157,157王立军,157,.5);
/* box-shadow: 0 1px 2px 0 rgba(157,157,157,.5); */
}
声明感谢您对我们网站的认可,非常欢迎各位朋友分享本站内容到个人网站或者朋友圈,
转转请注明出处:http://lyjinda.com/articles/1143.html
点赞 打赏

打赏方式:

支付宝扫一扫

微信扫一扫

扫一扫
QQ客服:111111111
工作日: 周一至周五
工作时间: 9:00-18:00