一、固定布局（PC）（静态布局）

以像素px作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸

二、不同分辨率加载css文件

可以根据不同的屏幕分辨率，来执行对应的css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>

    <script>

        // 分辨率大于等于1680，大部分为1920的范围情况下，调用此css
        if(window.screen.width >= 1680){
            document.write('<link rel="stylesheet" href="css/a.css"></link>')
        }
        else if(window.screen.width >= 1600){ // 分辨率在1600~1680之间，调用此css
            document.write('<link rel="stylesheet" href="css/b.css"></link>')
        }else { // 分辨率小于1600的范围情况下，调用此css
            document.write('<link rel="stylesheet" href="css/c.css"></link>')
        }


    </script>

</head>
<body>


    
</body>
</html>

注意：js必须写在head标签中，这样在加载页面内容之前，可以提前把css样式加载处理

三、媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定css样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

link元素中的css媒体查询

<link rel="stylesheet" media="(max-width:800px)" href="a.css"/>

css3必须设置

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
viewport：视口
width=device-width：将布局视口设置成理想的视口
initial-scale：[0,10]：初始缩放比例，1表示不缩放
maximum-scale：[0,10]：最大缩放比例
user-scalable：yes/no：是否允许手动缩放页面，默认值为yes

语法：

/* 大屏幕 */
@media only scree and (min-width:1200px){
    /* 对应的样式 */
}

/* 中等屏幕 */
@media only screen and (min-width:992px) and (max-width:1199px) {
    /* 对应的样式 */
}

/* 小屏幕 */
@media only screen and (min-width:768px) and (max-width:991px) {
    /* 对应的样式 */
}

/* 手机端显示 */
@media only screen and (max-width:767px) {
    /* 对应的样式 */
}

四、rem布局（弹性布局）

1、媒体查询结合rem布局

媒体查询动态修改根元素大小，使得rem一直在跟着变化，响应式就成功了

2、flexble.js和rem布局

简洁高效的rem适配方案：flexible.js 它的原理是把当前设备划分为10份，但是不同设备下，比例还是一致的我们要做的就是确定好当前设备的html文字大小

flexible.js下载地址

https://github.com/amfe/lib-flexible

实现详情

2.1、下载flexible.js放到项目目录里去

|  index.html
|
|-- css
    |-- index.css
|
|-- images
|-- js
    |-- flexible.js

2.2、引入flexible.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <!-- 引入flexible.js文件 -->
    <script src="js/flexible.js"></script>
</head>
<body>


    
</body>
</html>

2.3、index.css

body{
    min-width: 320px;
    max-width: 750px;
    /* flexible给我们划分了10份，所以应该是10rem */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
}

五、vw+vh+rem

1、vm、vh是基于视口的布局方案，所以这个meta元素的视口必须声明

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2、rem布局-解决字体适配

rem布局原理：根据css的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化


@media only scree and (min-width:1280px) and (max-width:1600px){
    html{
      font-size:14px
    }
}


@media only screen and (min-width:960px) and (max-width:1280px) {
    html{
      font-size:12px
    }
}


@media only screen and (max-width:960px) {
    html{
      font-size:10px
    }
}

3、vw、vh、rem的使用

<template>
    <div class="container">
        
    </div>
</template>

<script>

</script>

<style >

    .container{
        width: 50vw;
        height: 20vh;
        line-height: 20vh;
        font-size: 1.5rem;
        margin: 0 auto;
    }

</style>