随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等很不好适配

移动端设备屏幕尺寸非常多，碎片化严重，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都是非常实用的布局方式 ,那么今天就这些了

想要了解更多 ,请关注一下 ,一起交流学习

举报/反馈