移动端开发系列笔记(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行溢出;
}

}

你可能感兴趣的:(移动端开发)