本文主要是介绍移动端Web适配,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明来源http://blog.csdn.net/azureternite
目录(?)[+]
看了几篇文章,理一下网易跟淘宝移动端适配的思路,主要是参考 从网易与淘宝的font-size思考前端设计稿与工作流
像素相关概念
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。
其值也就是我们常说的分辨率
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
简称dip,也可以称为CSS像素
设备像素比(device pixel ratio)
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:
- 1
- 1
网易的做法
目的
css中使用的尺寸与设计稿保持一致,body的宽度设为屏幕宽度
原理
将页面宽度定为屏幕宽度,通过设置html的font-size与使用rem来实现尺寸与设计稿一致
思路
- 假设设计稿宽度为640px
- 那么以设计稿为准,设置body的宽度为640px
- 由于使用rem单位,因此需要设置html标签的font-size
- 为计算方便,取100px为参照,所以body的宽度为6.4rem
- 由于设备的dip!=设计稿宽度,因此font-size=deviceWidth/6.4
- css尺寸为:设计稿标注尺寸/100
淘宝的做法
目的
页面大小与设计稿保持一致
原理
设置meta viewport中的scale保证页面大小与设计稿一致,使用rem
思路
- meta viewport中device-width的算法为:设备的物理分辨率/(devicePixelRatio * scale)
- 而每台设备的devicePixelRatio都是已知的,可通过window.devicePixelRatio获取
- JavaScript动态计算设置scale,包括initial-scale,maximum-scale,minimum-scale
- 动态设置html的font-size,为屏幕分辨率/10
- css尺寸为:设计稿标注尺寸/html的font-size
关于font-size能不能使用rem的问题
流云诸葛在文章中说font-size不能使用rem,要用media query,而实际上,网易的font-size也是有用rem来作为单位的。
那么为什么会说font-size不能使用rem呢?到底能不能用rem?
答案是能的。
说不能可能是因为在网页中有可能使用了点阵字体,也叫位图字体,由于位图的缘故,点阵字体很难进行缩放。
这个概念与矢量字体相对应。
网上有给出对于文字使用px的原因的文章
根据以下两个原因,对于文字使用px:
- 在大屏设备希望看到更多的文字
- 中文点阵最好是在12px,14px,16px这种尺寸,使用rem就会无法避免使用13px,15px尺寸,这样文字会显示的很奇怪
虽然如此,但没有使用点阵字体的话,在一些情况,比如在需要自适应的情况下,使用rem也是没问题的。
关于font-size的更新(2016-09-14 11:50)
前面说到font-size能不能使用rem,给出的答案是 能。
但是经过一番摸索,这边我还是建议字号用px来作为单位。
为什么呢,除了点阵字体的原因,我们在使用rem时,在不同设备的字体大小不一样,而比较适合阅读的字号大小是14px或16px之类。
比如:iPhone5的设计稿是640px,那么根据网易的做法,html的font-size就是50px,那么我们根据设计稿定义一段文本的font-size为0.16rem,换算成px就是0.16 * 50 = 8 px,这样,在4吋iPhone上看这段文本时,就会显得很小;如果设置成0.32rem,在4吋iPhone上看是正常了,但是在较大屏幕上看,又会显得太大。
还有一个原因,使用rem最终是转换成px的,这样,转换后的px就有可能出现存在小数的情况,这个时候就可能出现1px的不对称。
因此我们在给文本定义字号时还是使用px,应对不同设备,使用media query,或者像淘宝的那种做法,在html中加上data-dpr,算出当前设备的dpr,再根据不同dpr来区分文本字号大小。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
参考
- 从网易与淘宝的font-size思考前端设计稿与工作流 - 流云诸葛 - 博客园
- 移动端高清、多屏适配方案 - Div.IO
- webapp font-size解决问题的方案
- H5自适应改造方案——rem方案
- 移动端适配方案(上)
- 移动端适配方案(下)
这篇关于移动端Web适配的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!