day16-移动端布局

分辨率，PPi,DPI,DPR,物理像素，逻辑像素区别

1、屏幕尺寸:指的是屏幕对角线的长度
2、分辨率:是指宽度上和高度上最多能显示的物理像素点个数
3、点距:像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小
4、PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度

5、DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思
6、设备像素(又称为物理像素):指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关，单位pt。
7、设备独立像素(也叫密度无关像素或逻辑像索):可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如:css像素)，这个点是没有固定大小的，越小越清晰，然后由相关系统转换为物理像素。
8、css像素(也叫虚拟像索):指的是CSS样式代码中使用的逻辑像素，在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)
9、DPR(设备像素比):设备像素比=设备像素（物理像素)/设备独立像素(逻辑像素)。(在Retina屏的liphone上，DPR为2， 1个ss像素相当于2个物理像素)

 

媒体查询 + rem 适配

/* 小屏手机 iphone5 */

@media all and (max-width:320px){

html{

font-size: 12px;

}

}

/* 中屏手机 iphone678 */

@media all and (min-width:321px) and (max-width:375px){

html{

font-size: 14px;

}

}

/* 大屏手机 iphone678plues */

@media all and (min-width:376px) and (max-width:414px){

html{

font-size: 16px;

}

}

屏幕的像素密度

- dpi 硬件和安卓设备上

- ppi 苹果设备上

常用的单位

        - px 像素

        - em 相对于父级元素计算的单位

        - pt 磅

        - % 高度自适应

        - deg 角度值

移动端中重要单位 rem 相对于根元素html的font-size进行计算的 默认 1rem = 16px

移动端的布局思路(推算过程)

        - 移动端的页面 浏览器的大小都是不一样的 但是html的font-size永远都是16px

        - rem单位是相对于html的font-size进行计算的

        - 网页中有一个宽高大小为2rem的盒子(32px*32px)

        - 考虑适配所有的移动端 可以使用媒体查询改变不同屏幕尺寸下的font-size的值

        - 小屏手机 => font-size:12px

        - 中屏手机 => font-size:14px

        - 大屏手机 => font-size:16px

移动端的计算方式总结

重要公式: 设备像素比(dpr) = 物理像素 / 逻辑像素

        - 设备像素比简称为dpr 真实设备的调试设备的比例

        - 物理像素:设计图大小

        - 逻辑像素:前端需要设置的css样式 px

需求:设计图宽度640px 导航高度为88px 求当前的高度在页面中怎么显示?

        - 调试工具是iphone5

        - 88px/2=44px

        - 44px是一个固定的值 如何把px转换为rem?

        - 小屏手机 => font-size:12px => 3.67rem

        - 中屏手机 => font-size:14px

        - 大屏手机 => font-size:16px

常见设备像素比

        - 设计图为640px的时候 dpr为2 调试在iphone5

        - 设计图为750px的时候 dpr为2 调试在iphone6、7、8

        - 设计图为1080的时候 dpr考虑为3 调试在iphone6、7、8 plus

第一种布局方案的总结

- 优点:好理解 简单方便

- 缺点:需要写很多套媒体查询、计算有误差

引出第二种布局方式: vw + rem

   vw:viewport width 视口宽度 1vw = 视口的百分之一

   100vw和100%的区别

        - 当浏览器没有滚动条的时候 100vw和100%相等

        - 当浏览器有滚动条的时候 100vw和100%不相等

推算思路

        - 100vw沾满了整个浏览器,拿到设计图 1vw就等于设计图的百分之一

        - 100vw/设计图的大小=每一份的大小

        - dpr=物理像素/逻辑像素

第一种情况:当设计图宽度是640px的时候 逻辑像素 = 640px/2

- 320px = 100vw

- 1vw = 3.2px

- 1px = 0.3125vw

- 导航高度为88px=>44px 44px*0.3125vw = ?

- 每次在设计图上量出的值乘以0.3125很麻烦

- html{

font-size:0.3125vw

}

- 44px改成44rem?

第二种情况:当设计图宽度为750px的时候 逻辑 = 750px/2

- 375px = 100vw

- 1vw = 3.75px

- 1px = 0.2667vw

总结:

        - 在设计图上量出设计图宽度尺寸

        - 640px的时候 html{1px = 0.3125vw}

        - 750px的时候 html{1px = 0.2667vw}

        - 计算方式

        - 物理像素/dpr = 逻辑像素px

        - px => rem

        - 和媒体查询没有关系！！！