灵活的布局技巧

概述：

为什么要提到布局呢，因为布局在我们制作网页的过程中是一个跨不过去的地方，无论怎样的网页都需要一定的布局，好的布局可以使网页更加的美观更加的清晰，而我们对网页布局就是对网页上面的文字与图片进行一定的规划和排版，使之在浏览器中看上去非常的一目了然，也能够增强客户的可使用性以及客户的使用感。

在了解一些灵活的布局技巧之前，我们也要熟知移动开发中涉及的基础知识。移动端和PC端两个不一样的客户端，导致我们在设计页面的时候需要进行灵活的布局技巧才可以使客户有更好的体验，知己知彼，百战不殆。

学习目标：

移动开发基础知识
网页各种常见的布局方式
响应式布局
媒体查询实现响应式

6.1移动开发基础知识

6.1.1移动端web的开发

在手机功能越来越强大的现在，web页面的浏览也逐渐由PC端转向移动端，而在此之前的设计都是PC端，因而在转移到移动端时会出现很多的不兼容，在这个时候就出现了两种解决方式。

一.单独制作移动端页面

针对于手机等视口小的设备单独设计的web页面。

优点：

可以充分考虑到平台的优势和局限性
创造良好的用户体验
网页在移动设备上加载的更快

劣势：

移动端会产生多个URL（移动端和PC端都会有）
维护成本和制作会增加，工作量比较大
重定向移动网站需要花费一些时间，需要对搜索引擎做一些处理。

而制作移动端是不改变原有的PC端，单独开发出一套特定的版本应用于移动端。

如果是移动设备（iPhone 6/7/8 Plus），则跳转到移动端页面
如果是PC端设备，则跳转到PC端页面

二.响应式页面

响应式页面的设计理念指的就是网站的页面能够兼容多种不同的终端，根据不同的环境做出自动的响应及调整。

而响应式开发就是为了解决移动互联网浏览的问题。

优点：***

跨平台：响应式网页设计本身最大的特点；
节省开发成本：不用根据不同设备来进行开发维护；
在不同平台上的表现内容保持一致性，体验良好；
便于搜索引擎收录，无论在移动端设备还是PC端上访问的都是同一个链接地址减少了权重的分散。

缺点：

局限性大，自由度低
会影响加载速度，也会导致不必要的流量浪费
部分浏览器的支持问题

6.1.2移动端基础知识

视口

视口是卢兰其页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口。

1.布局视口

一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的 layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。

iOS 和 Android 基本都将这个视口分辨率设置为 980px，所以计算机上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

2.视觉视口和物理像素

visual viewport（视觉视口）指设备物理屏幕的可视区域。

它是用户正在看到的网站的区域。注意：是网站的区域。

可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

3.理想视口和设备独立像素

ideal viewport（理想视口）通常是指屏幕分辨率。设备独立像素跟设备的硬件像素无关。一个设备独立像素在任意像素密度的设备屏幕上都占据相同的空间。

PC端可以调整屏幕的分辨率，调整理想的视口显示，而移动端不可以调整，都是厂家设置的默认值。也就是说设备独立像素的值就是理想视口（也就是分辨率）的值。

为了使网站在移动端有最理想的浏览和阅读宽度而设定

需要手动添写meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就多宽

4.CSS像素与设备独立像素

CSS像素是用于页面布局的单位，样式的像素尺寸是以CSS像素为单位指定的。CSS像素与设备独立像素的比例就是网页的缩放比例，如果网页没有缩放那么一个CSS像素就是一个设备独立像素。

5.视口的设置

为了保持一个 CSS 像素等于一个设备独立像素，通常需要在网页中通过代码去设置视口的大小。基本语法如下。

属性	解释说明
width	宽度的设置是viewport的宽度，可以设置device-width特殊值
inital-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalale	用户是否可以缩放，yes或者no（0或1）

在传统的PC端网页开发中，并没有使用过meta标签来设置视口，此时浏览器会按照默认的布局视口宽度来显示网页。如果希望网页在浏览器中以理想视口的形式呈现，就需要利用标签设置视口。在标签中，将name属性设为viewport，即可设置视口。

为什么在讲布局的时候，会说那么多移动端开发的知识呢？当然是因为我们的灵活布局一方面是为了适应各种屏幕的大小而去设计的，其中就有很多是为了保证我们在去设计我们布局的时候不出错误而做出的改变，我么了解了这么多，那么我们就能够更加熟练的对我们的布局做出改变，所以我们要熟知一些相关的知识，那么我们现在已经知道了在设计布局所需要知道的知识，我们回到布局，怎样去设计，适应个各种屏幕大小的布局方式。

6.2网页各种常见的布局方式

布局的好坏是直接影响我们所做项目的成功与否。网页的布局方式主要有：固定布局，流体布局和弹性布局。弹性布局是新兴的布局方式。

6.2.1固定布局

固定布局，顾名思义就是每一块的宽高都是由固定的像素宽度值决定的，同时这些区块的位置也是固定的，所以无论屏幕怎样改变用户看到的都是固定的宽度的内容。这种设计通常以像素作为衡量单位。

优势

能够使用像素值精确地控制大小并定位元素
相比流体布局，设计人员能够在页面上更加自如地控制元素的外观和位置
在控制文本行的长度时可以不用考虑用户窗口的大小
相对于页面其余部分，图像的大小始终不变

劣势

页面的边缘可能存在大块空白区域
如果用户的屏幕比设计人员的屏幕拥有更高的分辨率，那么页面可能看起来很小，文本也可能难以阅读
如果用户放大了字段大小，文本可能会与指定的区域相适应
相比流体布局，对于同样的内容，这种页面常常在垂直方向上占用更多的空间

应用

当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。
固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。

效果展示：

HTML：

    <body>
        <!-- 网页布局就是摆盒子 -->
        <!-- 大盒套小盒，盒子模型，简单布局，div块，浮动 -->
        <!-- 头部div -->
        <div class="head">
        </div>
        <!-- 主要内容div -->
        <div class="content">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <!-- 底部信息的div -->
        <div class="footer">
        </div>
    </body>

CSS：

    <style type="text/css">
        /* 清除浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
        }

        .head {
            width: 1000px;
            height: 150px;
            background-color: antiquewhite;
            margin: 0 auto;
        }

        .content {
            font-size: 0;
            width: 1000px;
            height: 400px;
            background-color: aqua;
            margin: 10px auto;
        }

        .content .left {
            display: inline-block;
            width: 200px;
            height: 100%;
            background-color: #F0F8FF;

        }

        .content .center {
            display: inline-block;
            width: 600px;
            height: 100%;
            background-color: #F0a8FF;

        }

        .content .right {
            display: inline-block;
            width: 200px;
            height: 100%;
            background-color: #F00fFF;

        }

        .footer {
            width: 1000px;
            height: 120px;
            background-color: aliceblue;
            margin: 0 auto;
        }
    </style>

6.2.2流式布局

流体布局是自适应布局的一种，其实现方法是讲大多数元素区块都设置成百分比宽度，而不是用具体的像素单位，这样可以让页面根据用户的屏幕和浏览器窗口的大小进行自适应的改变。

特征

高度定死,宽度自适应
使用相对单位

优点

可以适应不同尺寸的屏幕

缺点

对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长

应用

移动端一般采用流式布局
对于大的轮播图等,宽度100%自适应

常用操作

百分比设置 % 参考最近父级
窗口比设置 vw | vh
字体控制 em | rem ，em最近设置字体大小的父级规定的字体大小，rem为html字体大小

效果展示：

HTML：

<body>
    <!-- 流式布局 -->
    <!-- 目的：让布局脱离固定值限制，可以根据页面情况改变相应发生改变 -->
    <div class="box">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
    <div class="sup">
        <div class="text">我是一些文字</div>
    </div>
</body>

CSS：

    <style type="text/css">
        .box {
            /* 百分比流式 */
            /* 参考最近父级 */
            /* width:90%; */
            /* max-width:900px;
            min-width:600px; */

            /* 窗口比 */
            /* width:90vw;
            max-width:900px;
            min-width:600px; */

            height: 600px;
            background-color: rgb(39, 191, 168);
            margin: 0 auto;
        }

        .b {
            width: 100px;
            height: 100px;
            background-color: rgb(161, 122, 122);
            border-radius: 50%;
            float: left;
        }

        body {
            font-size: 30px;
        }

        .sup {
            font-size: 20px;
        }

        .text {
            /* 1em=16px 不一定*/
            /* font-size:1em; */
            /* font-size:16px; */
            /* font-size:0.4em;  */
            /* em为最近设置字体大小的父级规定的字体大小 */
            font-size: 1rem;
            /* rem为html字体大小 */
        }

        html {
            font-size: 40px;
        }
    </style>

6.2.3弹性布局

介绍

弹性布局也叫flex布局当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

特征

弹性盒子是CSS3的一种新布局模式
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

优点

容易上手，根据flex规则很容易达到某个布局效果

缺点

浏览器的兼容性比较差

应用

用于适应各个尺寸的设备

效果展示：

HTML：

 <ul id="list">
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
    </ul>

CSS：

body {
            margin: 0;
        }
        ul,
        li {
            margin: 0;
            padding: 0;
        }
        li {
            list-style-type: none;
        }
        #list {
            text-align: center;
            border: 2px solid rgb(30, 0, 255);
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        #list li {
            font-family: "microsoft yahei";
            font-size: 50px;
            background: rgb(8, 179, 221);
            color: #fff;
            margin: 2px;
            flex-grow: 1;
        }
        #list li:nth-child(2) {
            flex-grow: 2;
        }

6.2.4浮动布局

介绍

浮动布局float布局浮动的设计初衷是为了设计文字环绕效果

特征

脱离文档流

优点

浮动可以使元素block块状化（也就是行内元素浮动后可以设置宽高）；即display:inline-block;
可以使块元素同行排列

缺点

导致父元素高度塌陷
元素脱离文档流，布局困难

应用

现在pc端网页使用此布局较为频繁，和固定布局结合使用

示例

代码示例

 <div class="head">
    </div>
    <!-- 主要内容div -->
    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <!-- 底部信息的div -->
    <div class="footer">
    </div>

<style type="text/css">
        /* 清除浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
        }

        .head {
            height: 150px;
            background-color: antiquewhite;
        }

        .content {
            width: 1000px;
            height: 400px;
            background-color: aqua;
            margin: 10px auto;
        }

        .content .left {
            width: 200px;
            height: 100%;
            background-color: #F0F8FF;
            float: left;
        }

        .content .center {
            width: 600px;
            height: 100%;
            background-color: #F0a8FF;
            float: left;
        }

        .content .right {
            width: 200px;
            height: 100%;
            background-color: #F00fFF;
            float: left;
        }

        .footer {
            height: 120px;
            background-color: aliceblue;
        }
    </style>

6.2.5其他常见布局

1. 实现水平垂直居中最便捷的方法

难点

核心点在于使用了 FFC/GFC 使 margin: auto 在垂直方向上居中元素。

原因如下，在 dispaly: flex 下：

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

简单翻译一下，大意是在 flex 格式化上下文中，设置了 margin: auto 的元素，在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去

这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。

HTML:

 <div class="g-container">
      <div class="g-box"></div>
 </div>

CSS:

.g-container{
   width: 100vw;
   height: 100vh;
   display: flex;
}
.g-box{
   width: 40vmin;
   height: 40vmin;
   background-color: cyan;
   margin: auto;
}

效果展示：

2. 双飞翼布局

需求

双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。
双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列容器，中间middle多了一个子容器存在，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度。

关键点

双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度
双飞翼布局的关键点父元素不需要设置 padding
双飞翼布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的

HTML:

<div class="g-container">
  <div class="g-middle">
    <div class="g-middle-inner">middle-inner</div>
  </div>
  <div class="g-left">left</div>
  <div class="g-right">right</div>
</div>

CSS:

body{
  margin: 0px;
  padding: 0px;
}
.g-container {
  position: relative;
  height: 100vh;
  min-width: 400px;
}
.g-container > div {
  height: 100vh;
  float: left;
  text-align: center;
  color: #fff;
  line-height: 100vh;
  font-size: 3vw;
}
.g-middle {
  position: relative;
  width: 100%;
  background: #cc6630;
}
.g-middle-inner {
  margin: 0 200px;
}
.g-left {
  position: relative;
  width: 200px;
  background: #ffcc00;
  margin-left: -100%;
}

.g-right {
  position: relative;
  width: 200px;
  background: pink;
  margin-left: -200px;
}

效果展示：

3. 圣杯布局

方法一：

需求

圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。
圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。

关键点

圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置
圣杯布局的关键点父元素需要设置 padding
圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的

HTML

<div class="g-container">
  <div class="g-middle">middle</div>
  <div class="g-left">left</div>
  <div class="g-right">right</div>
</div>

CSS

body{
    padding: 0px;
    margin: 0px;
}
.g-container {
    overflow: hidden;
    position: relative;
    height: 100vh;
    padding: 0 200px;
    min-width: 400px;
}
.g-container > div {
    height: 100vh;
    float: left;
    text-align: center;
    color: #fff;
    line-height: 100vh;
    font-size: 3vw;
}
.g-middle {
    position: relative;
    width: 100%;
    background: #cc6630;
}

.g-left {
    position: relative;
    width: 200px;
    background: #ffcc00;
    margin-left: -100%;
    left: -200px;
}

.g-right {
    position: relative;
    width: 200px;
    background: pink;
    margin-left: -200px;
    right: -200px;
}

效果展示

方法二：通过flex实现

需求

圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。
圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。

关键点

圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置
圣杯布局的关键点父元素需要设置 padding
圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的

HTML

<div class="g-container">
    <div class="g-middle">middle</div>
    <div class="g-left">left</div>
    <div class="g-right">right</div>
</div>

CSS

body{
    padding: 0px;
    margin: 0px;
}
.g-container {
    position: relative;
    height: 100vh;
    min-width: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.g-container > div {
    height: 100vh;
    text-align: center;
    color: #fff;
    line-height: 100vh;
    font-size: 3vw;
}

.g-middle {
    order: 2;
    flex: auto 1 0 ;
    background: #cc6630;
}

.g-left {
    order: 1;
    flex: 200px 0 0;
    background: #ffcc00;
}

效果展示

4. 瀑布流布局

关键点

column-count: 元素内容将被划分的最佳列数
break-inside: 避免在元素内部插入分页符

HTML

<body>
  <div class="container">
    <div class="item">
      <div class="itemContent" style="background-color: blue;height: 50px">1</div>
    </div>
    <div class="item">
      <div class="itemContent" style="background-color: rosybrown;height: 100px">2</div>
    </div>
    <div class="item">
      <div class="itemContent" style="background-color: red;height: 80px">3</div>
    </div>
    <div class="item">
      <div class="itemContent" style="background-color: yellow;height: 50px">19</div>
    </div>
    ...为了方便省略了中间代码，这里为了方便区分，直接使用内联样式创建了五种颜色、高度各不相同的div块共36个
    <div class="item">
      <div class="itemContent" style="background-color: red;height: 80px">20</div>
    </div>
  </div>
</body>

CSS

.container{
  width: 100%;
  column-count: 5;
}
.item{
  break-inside: avoid;
  margin-bottom:10px;
}

效果展示

5. grid布局配合clip-path实现GTA5封面

关键点

grid 实现不规则的网格布局
clip-path 控制每个格子的形状

HTML

<div class="parent">
  <div class="child" >
    <img src="./pic/3B764549C23F3E4FFE51BBDE93A58669.jpg" alt="">
  </div>
  <div class="child">
    <img src="./pic/59A3C4ED5AA037168965D8CCCDB45ACD.jpg" alt="">
  </div>
  <div class="child">
    <img src="./pic/90276D90880B98EFCA28FE1E34AA4E3F.jpg" alt="">
  </div>
  <div class="child">
    <img src="./pic/A67BEE24EABB15869513D0FEF4320E28.jpg" alt="">
  </div>
  <div class="child">
    <img src="./pic/C22DA357168D789BBD4BC36EA1BE0FCB.jpg" alt="">
  </div>
  <div class="child">
    <img src="./pic/F11AAEEBE4D5234B64886C4DDB5ECBAC.jpg" alt="">
  </div>
  <div class="child">
    <img src="./pic/59A3C4ED5AA037168965D8CCCDB45ACD.jpg" alt="">
  </div>
  <div class="child">
    <img src="./pic/3B764549C23F3E4FFE51BBDE93A58669.jpg" alt="">
  </div>
  <div class="child">
    <img src="./pic/90276D90880B98EFCA28FE1E34AA4E3F.jpg" alt="">
  </div>
</div>

注意：

CSS

*{
  box-sizing: border-box;
}
body{
  padding:0; 
  margin: 0;
  background: #23232a;
}
img{
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 0;
}

.parent{
  padding: .8rem;
  background: black;
  height: 95vh;
  min-height: 500px;
  width: 100%;
  max-width: 600px;
  margin: auto;
  margin-top: 2.5vh;
  border: 1px solid #c9b473;
  overflow: hidden;
  display: grid;
  
  grid-template-columns: 1fr .7fr .3fr 1fr;
  grid-template-rows: 20% 40% 20% 20%;
  grid-template-areas: 'one two two three'
    'four five five five'
    'six five five five'
    'six seven eight eight';
}

.child:nth-child(1),
.child:nth-child(2),
.child:nth-child(3) img{
  width:120%;
  height: 120%;
}
.child:first-child{
  grid-area: one;
  clip-path: polygon(0% 0%, 93.24% 0%, 105.04% 110.16%, 0% 90%);
}
.child:nth-child(2){
  grid-area: two;
  clip-path: polygon(0% 0%, 108.28% 0%, 96.45% 110.13%, 10.55% 110.93%);
}
.child:nth-child(3){
  grid-area: three;
  clip-path:polygon(15.05% 0%, 100% 0%, 99.35% 91.7%, 3.08% 108.48%);
}
.child:nth-child(4){
  grid-area: four;
  clip-path: polygon(0% -0.85%, 106.34% 9.98%, 121.32% 65.63%, 99.66% 109.89%, 1.86% 124.41%);
}
.child:nth-child(4) img{
  width: 135%;
  height: 135%;
}
.child:nth-child(5){
  grid-area: five;
  clip-path: polygon(6.4% 6.48%, 47.24% 5.89%, 100% 0%, 98.41% 96.85%, 53.37% 100%, 53% 63.21%, 3.23% 73.02%, 14.30% 44.04%);
}
.child:nth-child(6){
  grid-area: six;
  clip-path:  polygon(2.14% 29.3%, 99.34% 15.42%, 98.14% 100.82%, 1.57% 101.2%);
}
.child:nth-child(7){
  grid-area: seven;
  clip-path: polygon(7.92% 33.47%, 96.31% 23.39%, 95.38% 100%, 5.30% 100.85%);
}
.child:nth-child(8){
  grid-area: eight;
  clip-path: polygon(2.5% 22.35%, 100% 0%, 100% 100%, 1.55% 100%);
}
.child:nth-child(9){
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 4; 
  
  clip-path:polygon(5.94% 28.66%, 100.61% -0.67%, 101.1% 108.57%, 5.4% 126.28%);
}
.child:nth-child(9) img{
  object-position: 30% 50%;
  height: 135%;
    }

效果展示

6.3响应式布局与自适应布局

无论是固定布局还是流体布都有各自的局限性，所以就衍生出了响应式布局。

响应式布局

什么是响应式布局

响应式布局就是一个网站能够兼容多种终端，而不是为每种终端做一个对应的网站。这种布局主要是为改善移动互联网的浏览体验而诞生的。通过艰涩视口分辨率，针对不同客户端在客户端做代码的处理，来展现不同的布局和内容。只需要开发一套界面就可以引用与所有的尺寸和终端。

技术原理

柔和了流式布局+弹性布局，再搭配媒体查询技术使用。

分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，使页面元素宽度随着窗口调整而自动适配。

即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

**布局特点:**每个屏幕分辨率下面会有一个布局样式，即位置和大小都会变。

**设计方法：**媒体查询+流式布局

通常使用媒体查询和网格系统配合相对布局单位进行布局，实际上就是综合响应式，流动等技术通过CSS给单一网页不同设备返回不同样式的技术统称。

自适应布局

什么是自适应布局

自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。

技术原理

分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。

**布局特点：**屏幕分辨率变化的时候，页面里面元素的位置会变化，而大小不会变化。

**设计方法：**使用媒体查询给不同尺寸和介质的设备切换不同的样式，在同一个设备下实际还是固定的布局。

6.3.1响应式布局优缺点

1．响应式布局优点

1）面对不同分辨率设备，展示不同效果的网站，灵活性强。

2）能够快捷解决多设备显示适应问题，而不需要做计算机站与手机站。

2．响应式布局缺点

1）兼容各种设备工作量大，效率低下（但相比于制作计算机站+手机站，还是快速很多）。

2）代码累赘，会出现隐藏无用的元素，使页面加载时间变长。

3．响应式的实现方式

响应式布局没有固定的要求，只要能实现计算机站与手机站的不同效果显示，都可以称为响应式网站。基于这个原则，流体布局其实本身就是响应式布局之一，除此之外，响应式还可以通过如下几种途径实现。

1）媒体查询。

2）流体布局。

3）弹性布局。

4）通过 JavaScript、JQuery 进行判断来显示不同的布局页面。

5）Bootstrap 等第三方框架。

6.3.2媒体查询实现响应式

媒体查询是通过判断媒体查询的设备类型，而执行不同的 CSS 代码，进而在不同的媒体设备上展示不同的样式。媒体查询主要是使用**@media** 关键字来实现，通过检测媒体类型是否符合要求，而确定是否执行这段CSS 代码。基本语法如下：

@media[not|only] type [and][expr]{ rules
}

1.and、not、only：逻辑关键字

逻辑关键字配合紧跟的媒体类型发挥作用，如 not screen 表示不检测屏幕宽度；only screen 表示只检测屏幕宽度而不关心其他媒体设备的属性。

2.type：媒体类型

媒体设备的类型有很多，大家可以参考帮助文档自行了解。网页开发中最常用的有 all
和 screen，all 表示检测所有媒体设备；screen 表示只检测媒体设备的屏幕宽度而不关心是哪种设备。

3.expr：媒体表达式

媒体表达式中用的属性就是 9.1.1 节讲解的各种媒体设备常用属性，比如最常用的就是
检测屏幕的宽度处于某个范围之间：(min-width:640px) and (max-width: 980px)。

4.rules：CSS代码

当上述设置的媒体设备查询语句生效以后，需要执行的 CSS 代码。与普通的 CSS 选择
器、语句写法完全相同，只是如果媒体设备查询不符合要求将不执行。

6.3.3使用媒体查询的方式

1.直接在css文件中使用

代码如下：

<style type="text/css"> // 没有经过媒体查询限制的CSS @media 类型 and (条件 1) and (条件 2){ // 媒体查询生效才会执行的CSS
}
</style>

2.使用import导入

代码如下：

@import url("css/media.css") all and (max-width:980px); // 当所有设备的宽度小于 980px时，才会 使用 import 导入CSS文件

3.使用link链接，media作为属性用于设置查询方式

代码如下：

<link rel="stylesheet" href="css/media.css" media="all and (max-width:980px)" /> 宽度小于 980px时，才会使用 link链接 CSS文件

**注：**媒体查询的优先级与普通 CSS 完全相同，因此当使用媒体查询时，一定要将媒体查询的样式放在默认样式之后，否则媒体查询会被默认样式覆盖，也就无法针对不同设备
进行变化。

效果展示：

窗口变化之前

窗口变化之后

HTML：

<header id="head">
        <ul>
            <li>我是标签1</li>
            <li>我是标签2</li>
            <li>我是标签3</li>
            <li>我是标签4</li>
            <li>我是标签5</li>
        </ul>
        <div>窗口缩小我出现</div>
    </header>
    <section id="main">
        <div class="left">左边</div>
        <div class="center">中心</div>
        <div class="right">右边</div>
    </section>
    <footer id="foot">底部</footer>

CSS：

  * {
        margin: 0px;
        padding: 0px;
        text-align: center;
        font-size: 48px;
    }

    #head,
    #foot,
    #main {
        height: 100px;
        width: 1200px;
        background-color: rgb(10, 223, 220);
        line-height: 100px;
        margin: 0 auto;
        min-width: 320px;
    }

    #head ul {
        width: 80%;
    }

    #head ul li {
        float: left;
        width: 20%;
        text-align: center;
        list-style: none;
        font-size: 20px;
    }

    #head div {
        display: none;
        font-size: 20px;
        height: 30px;
        width: 100px;
        background-color: rgb(6, 52, 203);
        float: right;
        margin-top: 35px;
        line-height: 30px;
    }

    #main {
        height: auto;
        margin: 10px auto;
        overflow: hidden;
    }

    .left,
    .center,
    .right {
        height: 600px;
        line-height: 600px;
        float: left;
        width: 20%;
        background-color: rgb(85, 11, 222);
    }

    .center {
        width: 60%;
        border-left: 10px solid #FFFFFF;
        border-right: 10px solid #FFFFFF;
        box-sizing: border-box;
    }

    @media only screen and (max-width: 1200px) {

        /*当屏幕宽度大于 1200px时会执行的CSS代码*/
        #head,
        #foot,
        #main {
            width: 100%;
        }
    }

    @media only screen and (max-width: 980px) {

        /*当屏幕宽度小于 980px时会执行的CSS代码*/
        .right {
            display: none;
        }

        .left {
            width: 30%;
        }

        .center {
            width: 70%;
            border-right: hidden;
        }
    }

    @media only screen and (max-width: 640px) {

        /*当屏幕宽度小于 640px时会执行的CSS代码*/
        .left,
        .center,
        .right {
            width: 100%;
            height: 200px;
            line-height: 200px;
            display: block;
        }

        .center {
            border: hidden;
            border-top: 10px solid #FFFFFF;
            border-bottom: 10px solid #FFFFFF;
            height: 600px;
            line-height: 600px;
        }

        #head ul {
            display: none;
        }

        #head div {
            display: block;
        }
    }