1、首先屏幕的尺寸就是屏幕对角线的长度 尺寸是固定的
2、开发中遇到的单位
相对单位(即相对于屏幕):px em pt
绝对单位(固定的大小,与设备屏幕无关):in cm
3、像素密度
像素密度指的是1英寸里面的像素的数量,比如1英寸里面是10px,通常有两种163(3gs) 330(4s)通常超过320的像素密度就是高清屏,计算方式:屏幕的分辨率高的平方+屏幕分辨率宽的平方 ,然后再开根号,再除以屏幕的英寸。
4、设备独立像素
设备独立像素表示真实像素和分辨率像素的一个比例,比如3gs手机高度480px,宽度320px分辨率,真实设备高度480px,宽度320px,即分辨率和真实像素一样的时候1pt = 1px;但是有一些设备高度960px,宽度640px,分辨率。真实设备高度480px,宽度320px,即分辨率是2倍的真实像素一样的时候,1pt = 2px。
5、物理像素和css像素
1、物理像素(分辨率的像素)960*640
2、css像素(真实像素)模拟器里面看见的320*568
6、视口
1、视口:浏览器的可视宽口在PC端是会受到浏览器窗口的变化而变化的
2、视口在pc端是可视窗口(会变的),在移动端会有一个固定的值,但通常默认980;
3、但是默认移动端的时候980会造成网页缩放或者出滚动条
4、解决移动端默认视口会造成网页缩放和滚动条,设置meta标签设置默认是视口的宽度等于设备的宽度
5、视口的其他属性初始化缩放initial-scale=1.0是否允许用户缩放user-scaleable=no,最大maximum-scale=1.0;和最小缩放minimum-scale=1.0;
6、meta:vp + tab 凡是写移动端页面,一开始就应该加上视口。