从零开始学 Web 之 移动Web（六）响应式布局

你们好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公众号：Web前端之巅
• 博客园：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的探索之旅吧！

网页布局

常见的网页布局方式分为如下四种：

一、固定宽度布局：为网页设置一个固定的宽度，一般以px作为长度单位，常见于PC端网页。

二、流式布局：为网页设置一个相对的宽度，一般以百分比作为长度单位。

三、栅格化布局：将网页宽度人为的划分红均等的长度，而后排版布局时则以这些均等的长度作为度量单位，一般利用百分比作为长度单位来划分红均等的长度。

四、响应式布局：经过检测设备信息，决定网页布局方式，即用户若是采用不一样的设备访问同一个网页，有可能会看到不同的内容，通常状况下是检测设备屏幕的宽度来实现。

注：以上几种布局方式并非独立存在的，实际开发过程当中每每是相互结合使用的。"

一、响应式布局

响应式布局，意在实现不一样屏幕分辨率的终端上浏览网页的不一样展现方式。

经过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验，以下图：

如上图所示，屏幕尺寸不同展现给用户的网页内容也不同，咱们利用 媒体查询 能够检测到屏幕的尺寸（主要检测宽度），并设置不一样的CSS样式，就能够实现响应式的布局。

二、响应式布局的缺点

咱们利用响应式布局能够知足不一样尺寸的终端设备很是完美的展示网页内容，使得用户体验获得了很大的提高，可是为了实现这一目的咱们不得不利用媒体查询写不少冗余的代码，使总体网页的体积变大，应用在移动设备上就会带来严重的性能问题。

响应式布局经常使用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。

三、屏幕尺寸的划分

通常咱们会对常见的设备尺寸进行划分后，再分别肯定为不一样的尺寸的设备设计专门的布局方式，以下图所示

类型	布局宽度
大屏幕	>= 1200px
默认	>= 980px
平板	>= 768px
手机到平板之间	<= 767px
手机	<= 480px

四、媒体查询

参考连接：http://www.runoob.com/cssref/css3-pr-mediaquery.html

使用 @media 查询，你能够针对不一样的媒体类型定义不一样的样式。

@media 能够针对不一样的屏幕尺寸设置不一样的样式，特别是若是你须要设置设计响应式的页面，@media 是很是有用的。

当你重置浏览器大小的过程当中，页面也会根据浏览器的宽度和高度从新渲染页面。

CSS 语法：

@media mediatype and|not|only (media feature) {
    /*CSS-Code*/
}

/*或者引入不一样样式文件的判断：当知足某个条件的时候，引入mystylesheet.css样式*/
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

mediatype 取值:

all 用于全部设备

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机等。

speech 应用于屏幕阅读器等发声设备

and|not|only：

and 同时知足，至关于 &&；

not 取反（通常写在 mediatype 前面）

示例：

<style>
  body{
    background-color: red;
  }
  /* 不在768-992之间的时候，设置背景颜色为蓝色*/
  @media not screen and (min-width: 768px) and (max-width: 992px){
    body{
      background-color: blue;
    }
}
</style>

media feature 取值：（主要关注如下三个宽度）

device-height 定义输出设备的屏幕可见高度。

device-width 定义输出设备的屏幕可见宽度。

max-device-height 定义输出设备的屏幕可见的最大高度。

max-device-width 定义输出设备的屏幕最大可见宽度。

min-device-width 定义输出设备的屏幕最小可见宽度。

min-device-height 定义输出设备的屏幕的最小可见高度。

max-height 定义输出设备中的页面最大可见区域高度。

max-width 定义输出设备中的页面最大可见区域宽度。

min-height 定义输出设备中的页面最小可见区域高度。

min-width 定义输出设备中的页面最小可见区域宽度。

4.一、min-width 与 min-device-height 的区别

device 表示的是设备，因此加了 device 的 范围取值表示的是设备的宽度范围。

• 在移动端，因为经过模拟器改变的是移动端设备的宽度，因此 min-width 与 min-device-height 效果同样；
• 在 PC 端，若是改变浏览器的宽度，而咱们电脑的宽度并无改变，因此设备的宽度必定，最终的效果就是只有一个范围起做用。

4.二、案例：控制不一样屏幕尺寸下屏幕背景色,

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒体查询：注意and后面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>

4.三、媒体查询条件判断的顺序

缘由：若是结构如上面示例的那样，而且媒体查询条件由重叠的话，后面的媒体查询样式设置会覆盖前面的媒体查询设置，为了不发生这种状况，咱们就应该遵循必定的规律，使得不一样的媒体查询条件下，执行不一样的样式，而不会发生冲突。

特色：

向上兼容：若是设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围内.

向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖

书写建议：

• 若是是判断最小值 (min-width)，那么范围就应该从小到大写
• 若是是判断最大值 (max-width)，那么范围就应该从大到小写

例如：

@media screen and (min-width: 768px){
  body{
    background-color: green;
  }
}
!*w:992!1200 blue  min-width: 992px:当屏幕的宽度大于等于992的时候*!
@media screen and (min-width: 992px){
  body{
    background-color: blue;
  }
}
!*w>1200 pink*!
@media screen and (min-width: 1200px){
  body{
    background-color: pink;
  }
}