新闻资讯  快讯  焦点  财经  政策  社会
互 联 网   电商  金融  数据  计算  技巧
生活百科  科技  职场  健康  法律  汽车
手机百科  知识  软件  修理  测评  微信
软件技术  应用  系统  图像  视频  经验
硬件技术  知识  技术  测评  选购  维修
网络技术  硬件  软件  设置  安全  技术
程序开发  语言  移动  数据  开源  百科
安全防护  资讯  黑客  木马  病毒  移动
站长技术  搜索  SEO  推广  媒体  移动
财经百科  股票  知识  理财  财务  金融
教育考试  育儿  小学  高考  考研  留学
您当前的位置:首页 > IT百科 > 程序开发 > 移动端 > 小程序

移动端1px边框的问题

时间:2019-10-21 17:08:18  来源:  作者:

前言

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

为了避免大家少走弯路,这里简单带一下网上提到的几种方案,包括下面的:

  • 边框的图片,border-image
  • 背景图片
  • 边框的阴影
  • 设置viewport的meta属性(不建议使用)

推荐方案:

1 transform

针对边框设置1px之后,在使用transform,需要结合JAVAScript代码,用来判断是否是Retina.

.hairlines li{ position: relative; border:none; } 
.hairlines li:after{ 
content: ''; 
position: absolute; left: 0; 
background: #000; width: 100%; height: 1px;
 transform: scaleY(0.5); transform-origin: 0 0; }

2 Postcss的postcss-write-svg

使用PostCSS的插件是不是比我们修改图片要来得简单与方便。

使用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 fakeBody = document.createElement('body')
 var testElement = document.createElement('div')
 testElement.style.border = '.5px solid transparent'
 fakeBody.AppendChild(testElement)
 docEl.appendChild(fakeBody)
 if (testElement.offsetHeight === 1) {
 docEl.classList.add('hairlines')
 }
 docEl.removeChild(fakeBody)
 }

4 伪元素 transform、border-image

京东的1px的方案,边框均是伪元素实现的,但不是所有的样式有实现。

// transform 方案
@media only screen and (-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: block;
 border: 1px solid #ddd;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 pointer-events: none;
}
// border-image方案
.jd-header-bar {
 position: relative;
 border-width: 0 0 1px;
 border-bottom: 1px solid #bfbfbf;
 -webkit-border-image: url("data:image/gif;base64,R) repeat-x 0 0;
 background-size: 100% 44px
}

5 box-shadow

天锚的方案:box-shadow

.templates-item-wrapper {
 width: 92%;
 margin: 0 auto;
 /* -webkit-box-shadow: 0 1px 2px 0 rgba(157,157,157,.5); */
 -moz-box-shadow: 0 1px 2px 0 rgba(157,157,157,.5);
 /* box-shadow: 0 1px 2px 0 rgba(157,157,157,.5); */
}


Tags:   点击:()  评论:()
声明:本站部分内容来自互联网,内容观点仅代表作者本人,如有任何版权侵犯请与我们联系,我们将立即删除。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
题:广州“出入大门”的白衣守护者  作者 蔡敏婕 陈淑华  在广州白云国际机场,有13个医疗急救点。...【详细内容】
2020-03-23   移动端  点击:(0)  评论:(0)  加入收藏
新冠肺炎疫情对全世界经济的冲击正逐步浮现,香港的“超级联系人”角色也因此受到挑战。笔者在大湾区多个城市游走多年,最终在深圳成功开创自己的事业,深深感觉到香港年轻一代仍有其不可替代的优势。...【详细内容】
2020-03-23   移动端  点击:(1)  评论:(0)  加入收藏
(杨佩佩)记者21日从山西联运集团股份有限公司获悉,自19日起,山西支援湖北医护人员及配偶、子女乘坐山西省太原市建南汽车站46条线路的客运班车终身免...【详细内容】
2020-03-23   移动端  点击:(2)  评论:(0)  加入收藏
3月17日自美国洛杉矶乘坐中国南方航空CZ610次航班(座位号R52H),于18日5时25分抵达沈阳桃仙机场,在机场边检站采样做新冠病毒核酸检测。...【详细内容】
2020-03-23   移动端  点击:(5)  评论:(0)  加入收藏
缅甸外交官、联合国驻缅甸机构人员在到达缅甸后需进行14天的居家隔离。...【详细内容】
2020-03-23   移动端  点击:(4)  评论:(0)  加入收藏
(记者 王国安)泰国卫生部21日公布,新增新冠肺炎确诊病例89例,再创单日确诊病例新高。...【详细内容】
2020-03-23   移动端  点击:(6)  评论:(0)  加入收藏
根据西班牙当地媒体当地时间20日下午的消息,目前效力于西甲西班牙人的中国球员武磊确诊感染新冠病毒。西媒确认武磊是4位感染病毒的球员之一。...【详细内容】
2020-03-23   移动端  点击:(4)  评论:(0)  加入收藏
安徽省建设合肥综合性国家科学中心人工智能研究院,开展基础研究、应用基础研究、技术创新和应用示范,为人工智能产业创新发展提供强大知识储备和技术...【详细内容】
2020-03-23   移动端  点击:(5)  评论:(0)  加入收藏
据湖北十堰市人民政府网站消息,为确保全市人民群众出行安全,十堰市新型肺炎疫情防控指挥部21日就规范人车安全有序流动有关事项发布通告。...【详细内容】
2020-03-23   移动端  点击:(3)  评论:(0)  加入收藏
据陕西省卫健委网站消息,2020年3月20日8时至21日8时,陕西新增1例境外(英国)输入新冠肺炎确诊病例;陕西本地无新增确诊病例,本地新增疑似病例0例,...【详细内容】
2020-03-23   移动端  点击:(4)  评论:(0)  加入收藏
根据大陆最新诊疗方案,病例确诊需结合核酸检测、血清特异性抗体检测、胸部影像学检查等多个标准。...【详细内容】
2020-03-23   移动端  点击:(6)  评论:(0)  加入收藏
我和表妹的对话虽是半开玩笑,但已然成为半个假洋鬼子的我,笃定“法国人要么美、要么死”的说法话糙理不糙,因为每天我都和一个非常有代表性的“法国人”样本一起工作、生活——我的爱人法兰克。...【详细内容】
2020-03-23   移动端  点击:(4)  评论:(0)  加入收藏
中国驻菲律宾大使黄溪连在机场会见洛钦,并向菲方移交了中国援助的抗疫物资。...【详细内容】
2020-03-23   移动端  点击:(5)  评论:(0)  加入收藏
当日21时10分,内蒙古森林消防总队参与跨区域协防的400余名指战员从河北石家庄临时驻地出发,前往五台山火场实施增援。...【详细内容】
2020-03-23   移动端  点击:(4)  评论:(0)  加入收藏
(袁超)贵州茅台酒股份有限公司2020年第一次临时股东大会20日选举高卫东为公司第二届董事会董事,在随后召开的董事会会议上,选举高卫东为公司第二届董...【详细内容】
2020-03-23   移动端  点击:(4)  评论:(0)  加入收藏
据路透社报道,21日,伊朗总统鲁哈尼表示,伊朗为抗击新冠肺炎疫情,采取了包括旅行限制等在内的社会疏离措施,这些措施将持续两到三周的时间,因为他...【详细内容】
2020-03-23   移动端  点击:(5)  评论:(0)  加入收藏
3月19日,武汉协和医院超声影像科门前,贴满了提示候诊患者保持距离的告示。中青报·中青网记者 李峥苨/摄  3月19日下午,武汉华中科技大学同济医学院附属同济医院门前,久违地出现了车辆川流不息的景象。...【详细内容】
2020-03-23   移动端  点击:(6)  评论:(0)  加入收藏
智利卫生部长马纳利奇20日说,从21日零时起,智利全国无限期关闭电影院、剧院、酒吧、舞厅等场所,餐厅将取消堂食,但保留外卖。...【详细内容】
2020-03-23   移动端  点击:(5)  评论:(0)  加入收藏
报到时要采取有效措施避免大量人员长时间聚集,家长一律不得进入校园,对学生携带的行李要做好入校前消毒工作。...【详细内容】
2020-03-23   移动端  点击:(6)  评论:(0)  加入收藏
(记者 陈冠言) 3月21日,广西对口支援湖北省十堰市抗疫医疗队乘坐北部湾航空包机返回南宁。...【详细内容】
2020-03-22   移动端  点击:(4)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条