PC及移动端页面适配方法
设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
1、全适配：流体布局+响应式布局
2、移动端适配：
流体布局+少量响应式
基于rem的布局
弹性盒模型

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

calc()
可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);

box-sizing
1、content-box 默认的盒子尺寸计算方式
2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内

流体布局示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body{
            margin:0;
        }
        .con a{
            display:block;
            width:25%;
            /* 
            width:calc(25% - 4px);
            */
            height:100px;
            background-color:gold;
            text-align: center;
            line-height:100px;
            float:left;
            text-decoration:none;
            color:#333;
            font-size:14px;
            border:2px solid #000;

            /* 将盒子真实尺寸的计算方式设置为包含边框和padding */
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div class="con">
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
    </div>
</body>
</html>

流体布局示例

响应式布局
响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（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%;}
}

响应式布局示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style type="text/css">        
        body{
            margin:0
        }
        .con div{
            width:23%;
            border:2px solid #000;
            background-color:gold;
            height:200px;
            margin:1%;
            float:left;
            box-sizing:border-box;
        }
        @media (max-width:800px){
            .con div{
                width:46%;
                margin:2%;
            }
        }
        @media (max-width:400px){
            
            .con div{
                width:94%;
                margin:3%;
            }
        }
    </style>
</head>
<body>
    <div class="con">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

响应式布局示例

流体布局是将一行的内容按照比例进行压缩；
响应式布局是，当宽度小于一定比例时，将一行的内容分两行放置。