码迷,mamicode.com
首页 > 移动开发 > 详细

移动端Rem布局注意事项

时间:2019-10-16 09:19:49      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:内容   ide   需要   span   expand   左右   宽度   section   子转换   

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

移动端Rem布局注意事项

标签:内容   ide   需要   span   expand   左右   宽度   section   子转换   

原文地址:https://www.cnblogs.com/gzw-23/p/11682225.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!