仅供学习，转载请注明出处
PC及移动端页面适配方法
设备屏幕有多种不同的分辨率，页面适配方案有如下几种： 1、全适配：响应式布局 流体布局 2、移动端适配：
- 流体布局 少量响应式
- 基于rem的布局
下面先来看看一个布局的问题。
布局问题
首先写四个div
按照百分比来设定宽度，无论如何缩放浏览器，这四个div都会自动调整大小。那么如果设置一个边框呢？
设置边框
从上面可以看到，由于增加了边框的像素，导致第四个div被挤了下来。那么该如何处理呢？
下面来看看流体布局。
流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
使用calc()方式来解决上面的布局问题 可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);
使用box-sizing方式解决上面的布局问题 1、content-box 默认的盒子尺寸计算方式 2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
响应式布局
响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。
相应布局的伪代码如下：
代码语言：javascript复制@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%
这就是响应式布局了，根据宽度的变化，响应变化相关的样式，达到适配不同的浏览器大小。
