css布局

2021/8/4 23:08:18

本文主要是介绍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布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程