1.什么是响应式网页设计？

页面的设计与开发应当根据用户行为以及设备环境进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式页面设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定版本。

2.媒体查询

实现页面在不同设备下正常预览 [判断当前设备]

媒体类型

将不同的设备划分为不同的类型

all (所有的设备)

print (打印设备)

screen (电脑屏幕,平板电脑,智能手机)

媒体特性

用来描述设备的特点,比如宽度,高度…

width 网页显示区域完全等于设置的宽度

height 网页显示区域完全等于设置的高度

max-width / max-height 网页显示区域小于等于设置的宽度

min-width / min-width 网页显示区域大于等于设置的宽度

orientation: portrait (竖屏模式) | landscape (横屏模式)

语法关键字

目的将媒体类型和媒体特性链接到一块,进行设备检测

and 可以将多个媒体特性链接到一块,相当于且

not 排除某个媒体特性相当于非,可以省略

only 指定某个特定的媒体类型, 可以省略
语法
分外联式和内嵌式

实例
可以按f12点击左上方的手机屏幕，页面会根据屏幕大小改变样式

<!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>Media Queries</title>
</head>
<style>
    /* @media 可以设置根据屏幕大小的变化而改变页面的样式 */
    
    body {
        font-family: Arial, Helvetica, sans-serif;
        background: gray;
        color: white;
        text-align: center;
        padding-top: 100px;
    }
    
    h1 {
        display: none;
    }
    
    @media (max-width:500px) {
        body {
            background: red;
        }
        #smartphone h1 {
            display: block;
        }
    }
    
    @media (min-width:501px) and (max-width:768px) {
        body {
            background: blue;
        }
        #table h1 {
            display: block;
        }
    }
</style>

<body>
    <div id="widescreen">
        <h1>widescreen</h1>
    </div>
    <div id="normal">
        <h1>normal</h1>
    </div>
    <div id="table">
        <h1>table</h1>
    </div>
    <div id="smartphone">
        <h1>smartphone</h1>
    </div>
    <div id="landscape">
        <h1>landscape</h1>
    </div>

</body>

</html>

3.em和rem单位

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

实例

<!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>Em and Rem Units</title>
</head>
<!-- em参照上一级的font-size 嵌套时会有问题
    rem参照根节点的font-size 默认为16px
-->
<style>
    #box1 {
        font-size: 20px;
    }
    
    #box1 h1 {
        font-size: 2em;
        line-height: 2em;
    }
    
    #box1 p {
        font-size: 1.5em;
    }
    
    #box2 {
        font-size: 20px;
    }
    
    #box2 h1 {
        font-size: 2rem;
        line-height: 2rem;
    }
    
    #box2 p {
        font-size: 1.5rem;
    }
</style>

<body>
    <div id="box1">
        <h1>我是h1</h1>
        <p>我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签 我是p标签我是p标签我是p标签我是p标签我是p标签
        </p>
    </div>
    <div id="box2">
        <h1>我是h1</h1>
        <p>我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签 我是p标签我是p标签我是p标签我是p标签我是p标签
        </p>
    </div>
    <div id="box3"></div>
</body>

</html>

4.vh和vw

vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。
由于现在移动设备（主要是手机）的屏幕尺寸千差万别，如果仍然根据屏幕的物理分辨率来设计网页，效果会很难统一，因此html5和css3引入视口的概念来代替显示器的物理尺寸。
通过在meta标签上的设置，视口的长宽可以跟设备的物理分辨率相等，也可以不相等（以便手机上可以实现用两个手指来放大会缩小页面），可根据需要灵活掌握。
在PC中，视口的长宽则是跟浏览器窗口的物理分辨率恒等的。
1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。

实例

<!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>
</head>
<style>
    /* vh 和vw 表示占据整个浏览器视口宽或高的百分比 */
    
    * {
        padding: 0;
        margin: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    header {
        color: white;
        background: #333 url('https://source.unsplash/user/erondu/1600x900') no-repeat center center/cover;
        height: 100vh;
        text-align: center;
        /* padding会使标签大小超过原本的值，设置盒子为怪异盒子解决 */
        box-sizing: border-box;
        padding: 2rem;
        padding-top: 15rem;
    }
    
    header h1 {
        font-size: 3rem;
    }
    
    header p {
        margin: 1rem 0;
    }
    
    .btn {
        display: inline-block;
        text-decoration: none;
        background: #f4f4f4;
        color: #333;
        padding: 0.7rem 2rem;
    }
    /* 当屏幕高度低于500px时 15rem的间距就太大了，所以用@media设置当屏幕高度小于500时间距为5rem */
    
    @media (max-height:500px) {
        header {
            padding-top: 5rem;
        }
    }
</style>

<body>
    <header>
        <h1>Welcome</h1>
        <p>Remember, my friend, don't try to fight the darkness with gentleness,but with fire.</p>
        <a href="#" class="btn">More</a>
    </header>
    <section>
        <h1>欢迎光临</h1>
        <p>朋友，记住，不要试图用温柔对抗黑暗，要用火</p>
    </section>
</body>

</html>