移动端开发系列笔记（2）—— 移动端特别样式处理

来源：慕课网《Hello,移动Web》

前言：移动开发像素知识

px: css像素，逻辑像素，是浏览器使用的抽象单位，不同设备可变

dp/pt: 物理像素，与设备无关

dpr: Device pixel ratio 设备像素缩放比；不同设备可变；

换算公式 ：1px = (dpr)2 * dp

如iphone2 640*1136dp dpr=2

则：css宽高为 320*568px

retina屏：dpr为2

更详细说明请移步：http://www.cnblogs.com/cench/p/5314044.html

一、移动端高清图片渲染

在 retina屏，1px是2dp,100px*100px图片是200dp*200dp渲染，导致图片模糊

方案A：加载高清图片，两倍图片(@2x)，然后图片容器缩小50%。

如图片大小，400*600

width:200px;
height:300px;

缺点：

1. 普通屏幕下同样加载了(@2x)图片，造成资源浪费
2. 图片会失去一些锐利度

方案B: 不同的dpr下，加载不同的尺寸的图片。

css媒体查询,通过javascript条件判断均可；

css媒体查询

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
       (min-resolution: 2dppx),             /* The standard way */
       (min-resolution: 192dpi)             /* dppx fallback */

来源：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
-moz-device-pixel-ratio可以用于兼容年龄超过16的Firefox浏览器,-webkit-device-pixel-ratio基于webkit的浏览器不支持dppx。

缺点：准备两套图片(@1x 和@2x)

二、移动端实现1px边框

问题：retina屏：1px使用2dp渲染，导致不够精致

方案A：
IOS8： border:0.5px;
方案B：
其他如Android: 伪类：1 px + Y轴缩放0.5

如：

.li{
//IOS8
border:0.5px;
}

.li:before{
//Others
    height:1px;
    -webkit-transform:scaleY(0.5);
}

三、相对单位——rem 用于布局

方案一：rem 基值根据不同设备适应

满足三个计算公式

remBasicValue = screen.width/20;

Awidth = Apx / remBasicValue;

Aheight = Apx / remBasicValue;

方案二：rem 基值采用定值

html{
//默认:
font-size:32px;
}

//IE6
@ media (min-device-width:375px){
html{font-size:37.5px}
}
//IE6 plus
@ media (min-device-width:414px){
html{font-size:41.4px}
}

注意：在rem布局中，字体等非布局元素的font-size使用px单位，布局元素采用rem相对单位

四、移动端的文本溢出问题

//单行文本溢出
.inline{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;//加...
}

//多行文本溢出；
.inlineTwoLine{

display:-webkit-box !important;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;

-webkit-box-orient:vertical;
-webkit-line-clamp:4;//第4行溢出;
}

}