移动端Rem布局注意事项

Posted 2021-03-25 gzw-23

1.布局的总体结构框架：

   

 

 2.注意事项：

（a）：如果是左右两栏的布局方式，须在article的同级加一个aside；

因为是同级，所以必须设置同样的样式；而且他俩的父级，也就是section必须转化为弹性盒子，（因为元素在弹性盒子里面可以在一行排列），

哪一个需要固定宽度就给他设置固定宽度，另外一个只需设置flex=1即可；

此外还需解决高度塌陷问题，将他们俩都设置 “overflow=auto //一定是auto//不能是hidden或者其他。”

 

 （b）：常规一栏的布局，只需按部就班写出结构以上框架即可；（除去aside）

然后其css样式，所有移动端都一个模子，首先一定是怪异盒模型，

section{width：100%；height：100%；padding：上 0 下 0}

article{width：100%；height：100%；overflow：auto}

所有在页面要呈现的东西全部写在article下面的div里面即可。

出现内容贴边现象，就只需在article里面加padding即可。

 

（c）：底部 footer里面 icon图标文字字和常规文字搭配写法：

 

其实很简单只需将footer转换成弹性盒子，然后里面写几个图标就几个盒子，把icon字和常规文字写在每一个盒子里面，

接着将每一个盒子转换成弹性盒子，

主轴切换成竖行；“column”。

 

如此，移动端rem布局轻松搞定！！！！