移动端笔记本

设备独立像素
屏幕的大小、屏幕的尺寸，别名叫点，是个单位
获取：window.screen.width/height
注意：
1、横竖屏切换的时候，真机里的这个值不会变，但在模拟器里是会切换的
2、在一个点里，可以放下很多像素
3、这个值是可以被改变的，通过缩放

设备像素，物理像素
屏幕分辨率，实际放的像素值，买手机的时候厂家告诉你的分辨率
这个值是虚拟的，无法获取

像素比：DPR，这个值无法修改
缩放的比例=设备像素/设备独立像素
获取：window.devicePixelRatio

PPI:每英寸显示的像素


viewport:视口，可视区窗口，通过meta标签设置
未设置：
1、屏幕一般为980，但不同的型号会不同
2、真机与模拟器的值也会不同
3、用window.innerWidth/innerHeight获取

用了缩放后，不是真正的缩放了，而是改变了屏幕的尺寸，设备的独立像素。 


viewport里的宽度设置成device-width后
1、宽度不变，像素会变化
宽度是多少在移动端页面与pc端里面是一致的，不会变化，但是像素会变化，一个像素会变成多个像素显示，变成的数量由像素比决定
2、设计图要根据设备（屏幕分辨率）去定大小，至少宽度要在750以上，一般会以750为基准
3、对于像素比为2以上的话，图片的尺寸是两倍，正好能够显示高清，但是对于像素比是1的话，图片的体积就过大了，会浪费流量，并且图片会自动压缩，效果还是会有一点差别，适配解决。

移动端适配方案
1 百分比布局
2 rem布局
3 flex布局
---
rem动态计算
rem布局中，用less计算值；
@rem=25px;
width:25/@rem
编译后即可
用hbuilder IDE设置后，直接输入25px，后转换成1rem 

---
flex
display:flex
默认是主轴排列，相当于float:left
---