新闻资讯  快讯  焦点  财经  政策  社会
互 联 网   电商  金融  数据  计算  技巧
生活百科  科技  职场  健康  法律  汽车
手机百科  知识  软件  修理  测评  微信
软件技术  应用  系统  图像  视频  经验
硬件技术  知识  技术  测评  选购  维修
网络技术  硬件  软件  设置  安全  技术
程序开发  语言  移动  数据  开源  百科
安全防护  资讯  黑客  木马  病毒  移动
站长技术  搜索  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:   点击:()  评论:()
声明:本站部分内容来自互联网,内容观点仅代表作者本人,如有任何版权侵犯请与我们联系,我们将立即删除。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
中华文化博大精深,很多中文表达方式是很优美的。那么,你知道常见的成语翻译成中文是怎样的吗?下面,一起来看看这些常见成语英译表达,口译必背哦! 1. 爱屋及乌Love me, love my do...【详细内容】
2019-11-12   移动端  点击:(5)  评论:(0)  加入收藏
1. Kali Linux的下载安装下载网址:最新版本 2019.3 2. 制作U盘启动注意要点:写入方式选RAW,否则无法启动。启动时,选择非uefi选项。 3. 配置网络1) 临时配置方法ifconfig eth0...【详细内容】
2019-11-12   移动端  点击:(3)  评论:(0)  加入收藏
蛋炒饭,相信大家都喜欢吃,它的做法很简单,很多人自己在家都会做。蛋炒饭虽然大家都会,但是想要做到香味十足,粒粒分明,米饭不能坨,应该很多人都做不到。在做蛋炒饭时,很多人都不懂先...【详细内容】
2019-11-12   移动端  点击:(1)  评论:(0)  加入收藏
大家对发票都不是很陌生,在工作和生活中经常碰到,但是很多人对发票的类别和作用可能就说不太清楚了。一、发票基本知识首先,我们要明确一点,在我国现行的税法体制下,发票属于增...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
作为企业的会计就一定要熟记各种公式,其中有一点就是增值税的计算方法,这个是必须要记住的,今天小编就来和大家介绍一下增值税的计算方法。 怎样计算增值税呢?首先我们要记住一...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
Mac电脑一直以高端大气、高颜值以及和iPhone无缝衔接的特点被越来越的人喜欢,但是由于大多数人之前都已经习惯了Windows系统,所以切换到Mac时总是各种不适应,觉得不好用。今天...【详细内容】
2019-11-04   移动端  点击:(0)  评论:(0)  加入收藏
有哪些实用建议帮助你选购苹果电脑?考虑到苹果电脑还会继续更新,我就简明扼要提几点建议:理性消费:苹果电脑价格不便宜,所以不要盲目跟风或为了追求时尚而冲动入手。经济条件允许...【详细内容】
2019-11-12   移动端  点击:(1)  评论:(0)  加入收藏
初学Excel函数公式,相信很多小伙伴们会被各种函数语法绕得晕头转向,今天老祝就来说说几个常用函数公式的用法:1、SUMIF作用:对符合指定条件的数据求和用法:=SUMIF(条件区域,指定...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
为了保证数据高可用,那么我们采用Zookeeper作为配置中心来保存数据。SpringCloud对Zookeeper的集成官方也有说明:https://cloud.spring.io/spring-cloud-static/Greenwich.S...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
人生在世,谁也不知道明天和意外谁会先来临。如果突然有一天,家里有人去世了,他们在银行里面仍有存款,在这种情况下,家人如何把存款取出来呢?这个事情非常让人头疼。按照正常逻辑来...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
现如今关于数据库的安全事故虽然已经层出不穷,但仍有许多企业对数据安全的重视程度不够,大多数企业中的IT人员都掌握着数据应用服务器的最高权限,一旦出现数据安全问题,譬如企业...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
近些年以Vlog形式衍生的视频内容在网络中快速兴起,让主要受众人口比电视媒体都要多。并且随着手机的不断迭代更新,以及相机的普及,让越来越多的人进入到了短视频以及Vlog的制...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
在工作中会遇到mysql要跨服务器访问,下面就介绍mysql的FEDERATED引擎如何建立跨服务器访问进入mysql命令行,没有看到Federated,说明没有安装mysql>show engines; 安装Federated...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
Veket Linux操作系统具备小巧,占用资源少,便携方便。安装方便,我们可以将其安装到电脑的硬盘,或者虚拟机中体验一把。如果家里有老式的闲置的电脑,将该系统安装到老式电脑,看看电...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
上帝模式,即"God Mode”,或称为“完全控制面板”。是Windows 系统中隐藏的一个简单的文件夹窗口,包含了几乎所有Windows系统的设置,如控制面板的功能、界面个性化、辅助功能选项...【详细内容】
2019-11-12   移动端  点击:(1)  评论:(0)  加入收藏
目前我国的汽车保有量已经突破了3.5亿台,汽车数量这么多,马路上每天都会发生交通事故。汽车数量的增多,一方面代表着我国的国力越来越昌盛,另一方面也能看出我国的交通制度更加...【详细内容】
2019-11-12   移动端  点击:(3)  评论:(0)  加入收藏
postgres主从流复制postgres在9.0之后引入了主从的流复制机制,所谓流复制,就是从库通过tcp流从主库中同步相应的数据。postgres的主从看过一个视频,大概效率为3w多事务qps。p...【详细内容】
2019-11-12   移动端  点击:(1)  评论:(0)  加入收藏
经历了两天不懈努力,终于恢复了一次误操作删除的生产服务器数据。对本次事故过程和解决办法记录在此,警醒自己,也提示别人莫犯此错。也希望遇到问题的朋友能找到一丝灵感解决问题。...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
最近总在头条遇到需要插入代码的时候,然而头条的代码高亮功能始终是我写插入代码的一大痛点。最主要的是:没有代码高亮;没有代码高亮;没有代码高亮。于是只能用代码转图片的方式...【详细内容】
2019-11-12   移动端  点击:(1)  评论:(0)  加入收藏
办公室上班族天天对着电脑,下班回家又要看着手机,生活中处处存在各种辐射。在平日的饮食上面有没有什么食物吃了之后能够帮助抵御辐射的呢?1、胡萝卜胡萝卜中含有丰富的天然胡...【详细内容】
2019-11-12   移动端  点击:(0)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条