移动端Rem布局注意事项

老子叫甜甜 提交于 2019-12-01 11:25:46

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布局轻松搞定!!!!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!