九、响应式网页制作

9.1 概念

同一个网页根据视口的不同，显示不同的版式。

响应式网页制作：responsive web design (RWD)

9.2 优缺点

优点：

对于不同视口都可以显示非常饱满的网页结构，没有横向滚动条。

缺点：

制作复杂，同时对于移动端而言，需要加载非常多的pc端的样式和图片等资源，影响加载速度，同时费流量。（国内没有纯响应式网站）

9.3 原理

同一个HTML页面根据视口不同加载不同CSS

CSS3可以使用媒体查询完成。

9.3.1 外链式媒体查询

外链式加载CSS

media：媒体

screen：屏幕

min-width:最小宽度，表示当视口大于或等于改值时，加载CSS

max-width:最大宽度，表示当视口小0于或等于改值时，加载CSS

<!-- 所有视口都加载 01.css -->
<link rel="stylesheet" href="01.css">

<!-- 媒体查询 -->
<!-- 大视口 >= 1200px 才会加载 01.css -->
<link rel="stylesheet" href="01.css" media="screen and (min-width: 1200px)">
<!-- 小视口加载 02.css -->
<link rel="stylesheet" href="02.css" media="screen and (max-width: 1199px)">

视口可以分为多个端口

>= 1200px

1199px >= 视口 >= 700px

<= 699px

<!-- 媒体查询 -->
<!-- 大视口 >= 1200px 才会加载 01.css -->
<link rel="stylesheet" href="01.css" media="screen and (min-width: 1200px)">
<!-- 中等视口 1199px >= 视口 >= 700px 加载 02.css -->
<link rel="stylesheet" href="02.css" media="screen and (max-width: 1199px) and (min-width:700px)">
<!-- 小视口 <= 699px 才会加载 03.css -->
<link rel="stylesheet" href="03.css" media="screen and (max-width: 699px)">

“留活口”：对于IE不兼容media，需要书写一个不添加media

如果不书写media ，表示所有视口都加载media

<!-- 留活口语句必须先书写 所有视口都加载 01.css 可以将公共样式写在这里 简化代码-->
<link rel="stylesheet" href="01.css">

<!-- 媒体查询 -->
<!-- 大视口 >= 1200px 才会加载 01.css -->
<link rel="stylesheet" href="01.css" media="screen and (min-width: 1200px)">
<!-- 中等视口 1199px >= 视口 >= 700px 加载 02.css -->
<link rel="stylesheet" href="02.css" media="screen and (max-width: 1199px) and (min-width:700px)">
<!-- 小视口 <= 699px 才会加载 03.css -->
<link rel="stylesheet" href="03.css" media="screen and (max-width: 699px)">

9.3.2 内嵌式媒体查询

@media screen and (视口) { }

/* 清除默认样式 */
* {
    padding: 0;
    margin: 0;
}
/* 媒体查询 */
@media screen and (min-width: 1200px) {
    .box {
        width: 100%;
        height: 200px;
        background-color: red;
    }
}
@media screen and (max-width: 1199px) {
    .box {
        width: 80%;
        height: 200px;
        margin: 0px auto;
        background-color: green;
    }
}

9.3 练习

<div class="header">
<h1 class="logo">logo</h1>
<nav>
    <ul>
        <li><a href="">网站栏目1</a></li>
        <li><a href="">网站栏目2</a></li>
        <li><a href="">网站栏目3</a></li>
        <li><a href="">网站栏目4</a></li>
        <li><a href="">网站栏目5</a></li>
        <li><a href="">网站栏目6</a></li>
        <li><a href="">网站栏目7</a></li>
        <li><a href="">网站栏目8</a></li>
        <!-- 利用类名 将特殊的效果渲染 -->
        <li class="hide"><a href="">网站栏目9</a></li>
        <li class="hide"><a href="">网站栏目10</a></li>
    </ul>
</nav>
</div>
<div class="content">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

<!-- 大尺寸 留活口必须书写在第一条-->
<link rel="stylesheet" href="01.css">
<!-- 小尺寸 -->
<link rel="stylesheet" href="02.css" media="screen and (max-width: 1199px)">

01.css ：

/* 清楚默认样式 */
* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
.header {
    width: 1200px;
    height: 100px;
    margin: 0px auto;
}
.header .logo {
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
    margin-right: 20px;
}
.header nav {
    float: left;
    width: 1000px;
    height: 100px;
}
.header nav ul li {
    float: left;
    margin-right: 10px;
    line-height: 100px;
}
.content {
    width: 1200px;
    margin: 50px auto;
    overflow: hidden;
}
.content p {
    float: left;
    width: 20%;
    height: 200px;
    background-color: #eee;
    margin-bottom: 10px;
    /* 均分盒模型 水平方向一般使用边框模拟 */
    border-right: 10px solid #fff;
    /* 内减盒模型 */
    box-sizing: border-box;
}

02.css ：

.header {
    width: 1000px;
}
.header nav {
    width: 800px;
}
.header nav ul li.hide {
    /* 消失 */
    display: none;
}
.content {
    width: 1000px;
}
.content p {
    width: 25%;
}