什么是响应式web网站

以前我写网的网页习惯的网页都是定宽的，比如最外层设置一个宽度为980px的盒子，这是因为那时候的网页主要显示在pc端上，而pc端显示器的大小差异不会特别大。于是固定宽度的样式写法成为了流行趋势。但是随着移动互联网的到来，设备类型的增多，如智能手机，平板。那么屏幕大小的差异也就凸显出来了，如果每一个屏幕设备宽度写一个样式的话，会发现存在大量重复的样式代码，且工作量会很大，于是我们需要一种减少重复样式，让样式能够自动适应屏幕的解决方案就出来了："响应式"。我们知道不同的设备拥有不同屏幕大小即视口(viewport)，那么我们不可能一个样式适应所有的屏幕大小，那么响应式解决的就是网站自动去识别不同屏幕，然后去使用对应的样式去适应屏幕。

注：视口(viewport),指显示网页的区域

响应式的核心技术

1.viewport属性

为了能够让我们的网页去适应屏幕的大小，我们需要添加一个meta属性

<metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • width=device-width：把宽度设置为设备宽度（自动适应屏幕宽度）
  • user-scalable：不允许用户缩放 （允许用户缩放视口大小，会增加复杂度）
  • initial-scale=1.0：初始化缩放比例
  • minimum-scale=1.0：最小缩放比例

    • 2.媒体查询

    至此我们解决了让网页自动适应不同的视口大小，但是不同的视口大小要显示不同的样式，我们还需要借助媒体查询来完成。CSS3规范分成很多模块，媒体查询（3级）只是其中一个模块。利用媒体查询，可以根据设备的能力应用特定的CSS样式。比如，可以根据视口宽度、屏幕宽高比和朝向（水平还是垂直）等，只用几行CSS代码就改变内容的显示方式。媒体查询得到了广泛实现。除了古老的IE（8及以下版本），几乎所有浏览器都支持它。

    媒体查询的语法

    说了这么多媒体查询长什么样子呢，我们来看一点示例代码。

    div{background:green
}@mediascreenand(min-width:350px){div{background:red
    }
}

    @media表示媒体查询代码，上面的内容含义是，如果是屏幕设备，并且视口宽度大于等于350px那么就会把div的背景颜色设置为红色，由于代码是由上向下循序解析的，所以，背景色红色会覆盖上面的背景色绿色的代码。

    注：因为我们接触的设备都是有屏幕的所以screen可以省略

    • 在 link 标签中使用媒体查询
    "style sheet"type="text/css"media="(min-width:350px)"href="index.css">

    这里会告诉浏览器，视口宽度大于等于350px时才加载index.css样式文件。

    • @import 中使用媒体查询
    @importurl("base.css") screenand(max-width:350px);

    css中可以通过import来导入其他的样式文件，这里告诉浏览器视口宽度大于等于350px时才加载base.css样式文件。

    • 在css中使用媒体查询
    @mediascreenand(min-width:350px){div{background:red
    }
}

    这里告诉浏览器视口宽度大于等于350px时把div的背景色设置为红色。

    媒体查询中支持的属性

    其他媒体查询最常用的属性就是min-width和max-width，其他的属性你可能一辈子都用不上

    • width：视口宽度。
    • height：视口高度。
    • max-width：最大视口宽度
    • min-width：最小视口宽度
    • device-width：渲染表面的宽度（可以认为是设备屏幕的宽度）。
    • device-height：渲染表面的高度（可以认为是设备屏幕的高度）。
    • orientation：设备方向是水平还是垂直。
    • aspect-ratio：视口的宽高比。16∶9的宽屏显示器可以写成aspect-ratio:16/9。  color：颜色组分的位深。比如min-color:16表示设备至少支持16位深。
    • color-index：设备颜色查找表中的条目数，值必须是数值，且不能为负。
    • monochrome：单色帧缓冲中表示每个像素的位数，值必须是数值（整数），比如monochrome: 2，且不能为负。
    • resolution：屏幕或打印分辨率，比如min-resolution: 300dpi。也可以接受每厘米多少点，比如min-resolution: 118dpcm。  scan：针对电视的逐行扫描（progressive）和隔行扫描（interlace）。例如720p HD TV（720p中的p表示progressive，即逐行）可以使用scan: progressive来判断； 而1080i HD TV（1080i中的i表示interlace，即隔行）可以使用scan: interlace来判断。
    • grid：设备基于栅格还是位图。

    3.响应式图片

    开发者不可能知道或预见浏览网站的所有设备，只有浏览器在打开和渲染内容时才会知道使用它的设备的具体情况（屏幕大小、设备能力等）。另一方面，只有开发者（你和我）知道自己手里有几种大小的图片。比如，我们有同一图片的三个版本，分别是小、中、大，分别对应于相应的屏幕大小和分辨率。浏览器不知道这些，我们得想办法让它知道。简言之，难点在于我们知道自己有什么图片，浏览器知道用户使用什么设备访问网站以及最合适的图片大小和分辨率是多少，两个关键因素无法融合。

    使用picture元素

    <picture><sourcemedia="(min-width: 750px)"srcset="source-medium.jpg"><sourcemedia="(min-width: 350px)"srcset="source-small.jpg"><imgsrc="source.jpg">picture>

    以上代码会根据视口宽度来适应使用不同的图片，如果视口宽度大于等于750px那么使用source-medium.js图片，否则，如果视口宽度大于等于350px使用source-small.jpg图片，否则都不满足条件使用source.jpg图片。这里source的顺序很重要，根据min-width大小按顺序进行编写，相反如果使用max-width就需要倒序编写。这样就可以根据不同大小视口使用不同大小的图片。

    虽然很好用，但浏览器支持并不是全面。幸运的是，您可以在不支持此元素的浏览器中使用，方法就是使用Picturefill.js，下载地址：https://scottjehl.github.io/picturefill。

    <script>document.createElement("picture");script><scriptsrc="js/picturefill.min.js"async>script>

    第一个