WXSS选择器权重与优先级
WXSS优先级与CSS类似,权重如下图所示
权重越高越优先。在优先级相同的情况下,后设置的样式优先级高于先设置的样式
权重案例:
适配小结
关键词:
物理像素dp
1. 物理像素(physical pixel)
- 物理像素又被称为设备像素(device pixel简称dp)他是显示设备中一个最微小的物理部件。
- 一个设备的物理像素是固定不变的。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏,指的是设备以多少物理像素来显示一个CSS像素.
- 也就是说,多倍屏以更多更精细的物理像素点来显示一个CSS像素点,在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素对应的却是4个物理像素。
2. 设备独立像素
- CSS像素/逻辑像素/设备独立像素/设备无关像素(Device Independent Pixels)
- 设备独立像素(又称设备无关像素 Device Independent Pixels),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
3. 设备像素比(Device Pixel Ratio, DPR)
- 一个设备的物理像素与逻辑像素之比
- 计算:设备像素比 2(dpr)= 物理像素(dp)750 / 逻辑像素375(dip)
- 在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素/逻辑像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。
4. DPI(Dots Per Inch,每英寸点数)
- 一个量度单位,用于点阵数码影像,指每一英寸长度中,取样、可显示或输出点的数目。
- 是屏幕像素密度ppi(pixel per inch)的单位
5. 屏幕像素密度ppi(pixel per inch)
- 屏幕像素密度(ppi)是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高。
- 单位:dpi(Dots Per Inch,每英寸点数)
- 计算:屏幕像素密度(ppi) = 对角线分辨率 / 对角线尺寸
为什么会有1px问题?
要处理这个问题,必须先明白知识点,就是设备的物理像素[设备像素] & 逻辑像素[CSS像素]
物理像素:
移动设备出厂时,不同设备自带的不同像素,也称硬件像素
逻辑像素:
即css中记录的像素,工程师像素
在开发中,为什么移动端CSS里写了1px,实际上看起来比1px粗?
- 其实这两个px含义其实是不一样的,UI设计师要求的1px是指设备的物理像素1px,而CSS里记录的像素是逻辑像素,它们之间存在一个比例关系
- 通常可以用 javascript 中的 window.devicePixelRatio 来获取,也可以用媒体查询的 webkit-min-device-pixel-ratio 来获取。
- 在手机上border无法达到我们想要的效果。这是因为 devicePixelRatio 特性导致,iPhone3之后的设备像素比 devicePixelRatio==2,而 border-width: 1px; 描述的是设备独立像素即逻辑像素,所以,border被放大到物理像素2px的物理像素显示,在iPhone上就显得较粗。
问题描述
在实现border时通常都是使用border属性,如下:
显示效果对比:
分析:
- 上面这张图片可以看到,在手机上border无法达到我们想要的效果。这是因为devicePixelRatio特性导致,iPhone的devicePixelRatio==2,而border-width: 1px描述的是设备独立像素
- 所以,border被放大到物理像素2px显示,在iPhone上就显得较粗。
- BFC
- 目前解决1px问题的方案有很多种,接下来依次对比分析下。
①媒体查询
②设置 border-image
③利用box-shadow阴影
④transform: scale(0.5)
⑤媒体查询 + transfrom
媒体查询
- 利用设备像素比缩放,设置小数像素;css与js写法任选其一
- css写法
- js写法
- 优点:简单,好理解
- 缺点:兼容性差,目前之余IOS8+才支持,在IOS7及其以下、安卓系统都是显示0px。
border-image 方案
设置 border-image 方案
- iOS7已经发布有一段时间,扁平化设计风格有很多值得称赞的地方,其中有很多设计细节都是值得研究的。
- 首先,来看下面iOS设置的截图中的border:
- 从上面的截图可以看到iOS7的设计是非常精细的,border是一根非常细的线。可以使用border-image实现iOS7的border效果。
- 通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。
- 同样,在使用border-image时,将border设计为物理1px,如下:
显示效果对比:
- border-width:指定边框的宽度,可以设定四个值,分别为上右下左border-width: top right bottom left。
- border-image:该例意为:距离图片上方2px(属性值上没有单位)裁剪边框图片作为上边框,下方2px裁剪作为下边框。距离左右0像素裁剪图片即没有边框,以拉伸方式展示。
- 缺点:需要制作图片,圆角可能出现模糊。代码写起来挺简单,但是要自己制作图片,而且圆角也不好弄,如果改了颜色就要对图片处理,所以不是很好的方案。
box-shadow方案
利用box-shadow阴影也可以实现
box-shadow属性的用法:box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]
参数:
- 参数分别表示: 水平阴影位置,垂直阴影位置,模糊距离, 阴影尺寸,阴影颜色,将外部阴影改为内部阴影,后四个可选。该例中为何将阴影尺寸设置为负数?设置成-1px 是为了让阴影尺寸稍小于div元素尺寸,这样左右两边的阴影就不会暴露出来,实现只有底部一边有阴影的效果。从而实现分割线效果(单边边框)。
- 优点:没有圆角问题
- 缺点:颜色不好控制
transform方案
transform: scale(0.5) 方案 - 推荐: 很灵活
- 核心思想是使用transform的scale来整体缩放,如果你想画一条1px的线,就可以直接用
- 理论上在dpr为2时就是scaleY(0.5),在dpr为3时就是scaleY(0.333),但是通常并没有针对其他dpr的做特殊处理。
- 因为在iPhone6(dpr=2)和iPhone6 Plus(dpr=3)中看起来差别不大
- 如果你想给一个元素加一个1px的边框可以利用到伪元素,在这个方案下边框加圆角也很容易实现,具体代码如下:
- 优点:可以实现圆角,京东就是这么实现的