css布局

本文主要是介绍css布局，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、响应式布局

（1）模块中内容：挤压－拉（布局不变）

（2）模块中内容：换行－平铺（布局不变）

（3）模块中内容：删减－增加（布局不变）

（4）模块位置变换（布局改变）

（5）模块展示方式改变：隐藏－展开（布局改变）

（6）模块数量改变：删减－增加（布局改变）

【因为考虑因素过多，代码冗余，除非特殊要求，用响应式布局】

二、移动端准备工作

em是根据自身字号大小适应高度，如果自身没有设置字号，找父级字号，都没有默认16px

rem是根据html设置的字号适应高度，如果没有设置也是默认16px

【如果使用rem一定要记得设置html字体】

移动端一般设计图的大小:640px / 750px / 1080px根据设计图的大小确定dpr的值:

如果设计图为640px >>> dpr为2【iPhone5】

如果设计图为750px >>> dpr为2 【iPhone6/7/8】

如果设计图为1080px >>> dpr为3 【puls】

如果给640的图需要适配750，就将 font-size写成31.25

640 font=31.25vw时 1rem=100px

这篇关于css布局的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS教程