.
1.背景介绍
首先,什么是viewport。
通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。
再具体一点,就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,
它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。
什么是绝对长度单位?什么是相对长度单位?
绝对长度单位:in(inch英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica)。 in、cm、mm和实际中的
常用单位完全相同。
pt是标准印刷上常用的单位,72pt的长度为1英寸。
pc也是印刷上用的单位,1pc的长度为12磅。绝对长度单位,虽然理解起来很容易,但是在网页的设计中很少用到。
相对长度单位:是网页设计中使用最多的长度单位,包括px、em、rem等。
2.知识解析
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?
屏幕尺寸:指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米。常见的屏幕尺寸有4.2、4.7、5.5、6.0等
屏幕分辨率:指在横纵向上的像素点数,单位是px,1px=1个像素点。 一般以纵向像素*横向像素来表示一个手机的分
辨率,
如1960*1080。(这里的1像素值得是物理设备的1个像素点)
屏幕像素密度:屏幕上每英寸可以显示的像素点的数量,单位是ppi,即“pixels per inch”的缩写。
屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,
反之越小
如何计算像素密度?
计算像素密度的公式: 通过勾股定理算出对角线的分辨率,然后在除以屏幕的尺寸
viewport的概念
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域 一般来讲,
移动设备上的viewport都是要大于浏览器可视区域
的,这是因为考虑到移动设备的分辨率相对于 桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计
的网站, 移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的), 但带来
的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
width 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
3.常见问题
当UI设计师给一个图的时候,为什么同是一个尺寸(px)而两者的大小不一样
4.解决方案
在Android中,规定以160dpi为基准,1dp=1px。如果密度是320dpi,则1dp=2px,以此类推。 Android和IOS都会通过转
换系数让控件适应屏幕的尺寸。一个按钮给了44*44dp的大小,在160dpi密度的 时候,
按钮就是44*44px大小;在320dpi密度的时候,按钮就是88*88px的大小。不需要我们去书写多套尺寸
5.编码实战
6.扩展思考
移动端常用的方案有哪些?
简单方法简单解决(使用PX)
代表:拉钩网 弹性布局
开发原则:文字流式,控件弹性,图片等比缩放
使用rem布局
代表:网易、淘宝
使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦, 网易是如何解决的呢?
最根本的原因在于,
网易页面上html的font-size不是预先通过媒介查询在css里定义好的, 而是通过js计算出来的。
问题;
1.
计算像素密度的公式:
勾股定理算出对角线的分辨率:√(1920²+1080²)≈2203px
对角线分辨率除以屏幕尺寸:2203/5≈440dpi。
对角线分辨率除以屏幕尺寸:2203/5≈440dpi。
2.什么是物理分辨率
手机出厂的时候以及设置好的分辨率,是不可更改的,如小米mix2的分辨率就是1980px*2216px
3.写响应式的页面用em好还是用rem好,两者有什么差别
em是相对父级,rem相对根元素;一般在写响应式页面的时候,通常是使用rem