-
viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。
-
# 如何解决1px问题
1. 媒体查询利用设备像素比缩放,设置小数像素
IOS8下已经支持带小数的px值,
media query
对应devicePixelRatio
有个查询值-webkit-min-device-pixel-ratio
, css可以写成这样.border { border: 1px solid #999 } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999 } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #999 } }
【缺点】对设备有要求,小数像素目前兼容性较差。
2. viewport + rem 方案
该方案是对上述方案的优化,整体思路就是利用
viewport + rem + js
动态的修改页面的缩放比例,实现小于1像素的显示。在页面初始化时,在头部引入原始默认状态如下:<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
接下来的任务就是js的动态修改缩放比 以及 实现rem根元素字体大小的设置。
var viewport = document.querySelector("meta[name=viewport]") if (window.devicePixelRatio == 1) { viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no') } if (window.devicePixelRatio == 2) { viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no') } if (window.devicePixelRatio == 3) { viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no') } var docEl = document.documentElement; var fontsize = 10 * (docEl.clientWidth / 320) + 'px'; docEl.style.fontSize = fontsize;
【缺点】以为缩放涉及全局的rem单位,比较适合新项目,对于老项目可能要涉及到比较多的改动。
3. 设置 border-image 方案
.border-image-1px { border-width: 1px 0px; -webkit-border-image: url("border.png") 2 0 stretch; border-image: url("border.png") 2 0 stretch; }
【解释】
border-width
指定边框的宽度,可以设定四个值,分别为上右下左border-width: top right bottom left
。
border-image
该例意为:距离图片上方2px(属性值上没有单位)裁剪边框图片作为上边框,下方2px裁剪作为下边框。距离左右0像素裁剪图片即没有边框,以拉伸方式展示结合起来就是:在边框图片中,裁剪图片上下方的2个像素宽度作为上下边框,并展示在宽度为1个像素的边框空间里。左右没有边框。 注意这里的1个像素是特殊的,专指物理像素,而平时设定的长宽1px则表示逻辑像素(该观点为个人理解)。
你可能并没有理解,裁剪边框是什么鬼?为啥还要裁剪?
border-image
确实是个很难理解的属性,是去w3c看了之后更加蒙圈了。w3c内容提炼的太精致了,但解释根本就不够。因此奉上张鑫旭老师 border-image详解 一文,特别要理解九宫格裁剪法。当然,这种方式引入了图片,我们还能将图片装换成base64形式表现
.border-image-1px { border-width: 1px 0px; -webkit-border-image: url("") 2 0 stretch; border-image: url('如上'); }
【缺点】需要制作图片,圆角可能出现模糊
4. background-image 渐变实现
除了使用图片外,当然也能使用纯css来实现,百度糯米团就是采用的这种方案。
.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; }
【思路】将原本1个物理像素的边框大小利用线性渐变分割成几个部分(百分比控制),实现小于1像素效果
【解释】linear-gradient
指定线性渐变,接受大于等于3个参数,第一个为渐变旋转角度,第二个开始为渐变的颜色和到哪个位置(百分比)全部变为该颜色,该例子中,第一句就是,渐变方向旋转180度,即从上往下(默认为0度从下往上),从红色开始渐变,到50%的位置还是红色,再渐变为继承父元素颜色。
【缺点】因为每个边框都是线性渐变颜色实现,因此无法实现圆角5. box-shadow 方案
利用阴影也可以实现,优点是没有圆角问题,缺点是颜色不好控制
div { -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5); }
【理解】来回顾一下
box-shadow
属性的用法。box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
参数分别表示: 水平阴影位置,垂直阴影位置,模糊距离, 阴影尺寸,阴影颜色,将外部阴影改为内部阴影,后四个可选。该例中为何将阴影尺寸设置为负数?设置成
-1px
是为了让阴影尺寸稍小于div元素尺寸,这样左右两边的阴影就不会暴露出来,实现只有底部一边有阴影的效果。从而实现分割线效果(单边边框)。6. transform: scale(0.5) 方案 - 推荐: 很灵活
在以上的用法种,无非逃不开一种思想,就是将1px缩小为0.5px来展示,然而。0.5px并不是所有的设备或浏览器都支持,就考虑用媒体查询或viewport将其缩放比例。其实1像素问题的产生基本发生在设置边框或分割线的时候,场景并不覆盖全局样式,因此,直接缩放需要设置的元素,才是我们真正需要的。
tranform
就能实现这个需求。- 设置
height: 1px
,根据媒体查询结合transform
缩放为相应尺寸。
div { height:1px; background:#000; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden; }
2.用
::after
和::befor
,设置border-bottom:1px solid #000
,然后在缩放-webkit-transform: scaleY(0.5);
可以实现两根边线的需求div::after{ content:'';width:100%; border-bottom:1px solid #000; transform: scaleY(0.5); }
3.用
::after
设置border:1px solid #000; width:200%; height:200%,
然后再缩放scaleY(0.5);
优点可以实现圆角,京东就是这么实现的,缺点是按钮添加active
比较麻烦。.div::after { content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; border-radius: 4px; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); -webkit-transform-origin: top left; }
# 6.5 媒体查询 + transfrom 对方案1的优化
/* 2倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } /* 3倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } }
- 设置
移动端一像素问题
最新推荐文章于 2023-08-25 10:00:25 发布