流体布局、响应式布局

仅供学习，转载请注明出处

PC及移动端页面适配方法

设备屏幕有多种不同的分辨率，页面适配方案有如下几种： 1、全适配：响应式布局+流体布局 2、移动端适配：

• 流体布局+少量响应式
• 基于rem的布局

下面先来看看一个布局的问题。

布局问题

首先写四个div

按照百分比来设定宽度，无论如何缩放浏览器，这四个div都会自动调整大小。那么如果设置一个边框呢？

设置边框

从上面可以看到，由于增加了边框的像素，导致第四个div被挤了下来。那么该如何处理呢？

下面来看看流体布局。

流体布局

流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

使用calc()方式来解决上面的布局问题 可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);

使用box-sizing方式解决上面的布局问题 1、content-box 默认的盒子尺寸计算方式 2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内

响应式布局

响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

相应布局的伪代码如下：

@media (max-width:960px){
    .left_con{width:58%;}
    .right_con{width:38%;}
}
@media (max-width:768px){
    .left_con{width:100%;}
    .right_con{width:100%;}
}

看完上面的示例，下面再来实操一下看看。

按照上面的流体布局，当缩放浏览器的时候，这四个div就会被压缩比较窄。例如，如果是手机APP，那么就更加窄小了。

那么下面可以设置一下响应式布局。

当浏览器缩放宽度小于800px，那么div的大小就变为50%

当浏览器缩放宽度小于500px，那么div的大小就变为98%

这就是响应式布局了，根据宽度的变化，响应变化相关的样式，达到适配不同的浏览器大小。