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

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的边框可以利用到伪元素，在这个方案下边框加圆角也很容易实现，具体代码如下：
  
  
• 优点：可以实现圆角，京东就是这么实现的

媒体查询 + transfrom

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