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

来源：互联网发布：如何使用淘宝客返利编辑：程序博客网时间：2024/06/05 04:04

来源：慕课网《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;

缺点：

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

方案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{//IOS8border: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行溢出;}}

0 0