rem与移动端布局

Posted 2020-11-01 RocketV2

　　移动端布局痛点在：兼容各个分辨率的移动设备，同样是手机，iPhone4-iPhoneX分辨率范围就已经很广；如果使用px进行布局，显然会出现问题；

　　常见的像素单位px,em,rem中，em是相对于父元素font-size的单位，个人认为在使用中，em会比较混乱；rem相对的是根元素、html，便于根据屏幕分辨率进行布局；

　　目前移动端布局采用的方式：  “横向百分比 + 纵向rem”，同时使用flex布局，媒体查询；

 

 

https://www.cnblogs.com/ysshuai/p/6694339.html

 https://www.cnblogs.com/mracale/p/7170385.html

https://www.cnblogs.com/jide/p/7051006.html

 

　　布局中经常使用的box-sizing，

　　盒子模型 盒子宽度 = border + padding + content ; 使用box-sizing后，属性width就是指盒子宽度，而不是content的宽度；

https://www.jianshu.com/p/e2eb0d8c9de6