微信小程序（适配小结、移动端1px与选择器权重）

微信小程序（适配小结、移动端1px与选择器权重）

WXSS选择器权重与优先级

WXSS优先级与CSS类似，权重如下图所示

权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式

适配小结

针对上节介绍的物理像素与逻辑像素相关概念，本节再来做个小结，简单做下回顾

关键词：

物理像素dp

（1）物理像素(physical pixel)
物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。
一个设备的物理像素是固定不变的。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素.
也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。
（1）物理像素(physical pixel)

设备独立像素DIP

（2）设备独立像素
CSS像素/逻辑像素/设备独立像素/设备无关像素（Device Independent Pixels）
设备独立像素(又称设备无关像素 Device Independent Pixels），可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。

设备像素比DPR

（3）设备像素比（Device Pixel Ratio, DPR）
一个设备的物理像素与逻辑像素之比

计算：设备像素比 2(dpr)＝ 物理像素(dp)750 / 逻辑像素375(dip)

在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素/逻辑像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。

每英寸点数DPI

（4）DPI（Dots Per Inch，每英寸点数）
一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。
是屏幕像素密度ppi（pixel per inch）的单位

屏幕像素密度ppi

（5）屏幕像素密度ppi（pixel per inch）
屏幕像素密度(ppi)是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高。
单位：dpi（Dots Per Inch，每英寸点数）
计算：屏幕像素密度(ppi) = 对角线分辨率 / 对角线尺寸

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。
物理像素：
移动设备出厂时，不同设备自带的不同像素，也称硬件像素
逻辑像素：
即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上就显得较粗。

解决方案

目前解决1px问题的方案有很多种，接下来依次对比分析下。
①媒体查询
②设置 border-image
③利用box-shadow阴影
④transform: scale(0.5)
⑤媒体查询 + transfrom

媒体查询

（1） 媒体查询
利用设备像素比缩放，设置小数像素；css与js写法任选其一

优点：简单，好理解
缺点：兼容性差，目前之余IOS8+才支持，在IOS7及其以下、安卓系统都是显示0px。

border-image 方案

（2）设置 border-image 方案
iOS7已经发布有一段时间，扁平化设计风格有很多值得称赞的地方，其中有很多设计细节都是值得研究的。
首先，来看下面iOS设置的截图中的border：

（2）设置 border-image 方案
从上面的截图可以看到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方案

（3）利用box-shadow阴影也可以实现


box-shadow属性的用法：box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]

参数：
参数分别表示: 水平阴影位置，垂直阴影位置，模糊距离， 阴影尺寸，阴影颜色，将外部阴影改为内部阴影，后四个可选。该例中为何将阴影尺寸设置为负数？设置成-1px 是为了让阴影尺寸稍小于div元素尺寸，这样左右两边的阴影就不会暴露出来，实现只有底部一边有阴影的效果。从而实现分割线效果（单边边框）。

优点：没有圆角问题
缺点：颜色不好控制

transform方案

（4）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的边框可以利用到伪元素，在这个方案下边框加圆角也很容易实现，具体代码如下：



优点：可以实现圆角，京东就是这么实现的

媒体查询 + transfrom

（5）媒体查询 + transfrom 对方案1的优化