随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等很不好适配
移动端设备屏幕尺寸非常多，碎片化严重，Android和苹果设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等
一般的电脑端的页面布局在手机上无法完全适应，那么如何让一个页面匹配各个分辨率的页面呢？
那么首先现在移动端有两种适配方案:
一 .单独制作移动端页面(主流)也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站
移动端单独制作的常见布局方式:
流式布局(百分比布局)
flex 弹性布局(强烈推荐)
less+rem+媒体查询布局
混合布局
比如百度pc端和移动端的官网:
pc端一套代码样式
移动端一套代码样式
二 .响应式页面兼容移动端即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配
响应式
媒体查询
bootstarp
比如三星的官网 , 用不同终端打开, 它会自动适配不同的样式 ,但是却是一套代码 ,但是由于响应式网站能够适应市场上所有主流终端，在开发中的测试量非常很大很麻烦，因此响应式布局不能在大型网站的前提下实现多终端自适应。所以大部分网站都不用它.
那么我们来看看他们有什么不同
流式布局：
流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限 制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
下面是百分比布局(流式布局)的用法:
例如这样的三个盒子
第一个盒子占50%右边俩个各占25%
flex布局
flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活 性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性 将失效。
flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器(flex
container)
下面就是flex布局 ,弹性盒模型:
flexbu'j
给盒子添加flex属性,改变盒子模型
rem适配布局
1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当 前设备。
2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem 做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适 配。
技术方案：
1.rem+媒体查询
2.lflexible.js+rem
盒子样式字体随着屏幕宽度变化
运用rem和媒体查询自动适配不同屏幕
混合布局
至于混合布局就是在我们做网站项目的时候 ,可以根据不同的组件需求 ,做出相应的 布局方式 ,并不局限在哪一种 ,例如我们全局使用rem适配 ,部分盒子照样用flex布局 可以混用,并不影响.(同上rem里面运用了flex)
响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子 元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分
超小屏幕(手机，小于 768px)：设置宽度为 100%
小屏幕(平板，大于等于 768px)：设置宽度为 750px
中等屏幕(桌面显示器，大于等于 992px)：宽度设置为 970px
大屏幕(大桌面显示器，大于等于 1200px)：宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
下面是通过媒体查询来展示不同屏下的响应式排列 ,当然实际网站很多时候都是通过bootstarp来做的
响应式就会根据屏幕大小排版
这些都是常见的H5移动端布局方式 ,实际运用中flex和rem都是非常实用的布局方式 ,那么今天就这些了
想要了解更多 ,请关注一下 ,一起交流学习
举报/反馈
