【如何简单实现移动端布局】

前沿:

移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

第一步

1.下载flexible.js相关文件可以在官网引入链接使用，可放在head标签中复制使用

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
它的作用是用来适配各种手机尺寸的大小配置移动端的js框架不同大小的屏幕都适应相同的样式。

 

2.创建一个txt在里面复制flexble.js代码 

flexible.js代码网站:flexible.js（px2rem实现原理） - 王者归来！ - 博客园

在编辑器里直接引入该文件

 

 这样就可以使用了。

第二步

在body标签里面设置一个div标签 作为整个页面的大盒子在里面进行布局样式

在html中布局盒子移动端布局简单分为上中下三个部分 

上部分一般高度为100px 也可以转换rem 为1.33333rem 头部标签以<header>标签为主这样更好区分 中间标签为<section>,底部为<footer>进行标识

将body和html标签css设置为 宽度100% 高度100% 

 

大盒子css设置 宽度100%高度100% 设置为弹性盒 display:flex,  flex-direction: column;

 

头部和底部我们设置为宽度100%,高度100px，中间部分为flex：1;将撑起整个页面

 

这样就做好了最终效果为: