响应式

响应式：

针对某些设备的某些特征可以由不同的样式，通过媒体查询对页面进行重构。

流动网格、弹性图片和媒介查询是响应式互联网设计的三大技术成分。

响应式网站是一个设计理念，它是多想技术的综合体。

媒体查询

在 CSS2 中

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">

<link rel="stylesheet" type="text/css" href="css/print.css"media="print">

在 CSS3 中

@media all and (min-width:800px) and (orientation:landscape){
    ...
}


@media only screen and (min-width:800px){
    ...
}


@media only print and (min-width:800px){
    ...
}

only :只有。防止老旧的浏览器不支持带媒体属性的查询，而应用到给定的样式。建议不省略 only。

media="only screen and (min-width:401px) and (max-width:600px)"      //旧浏览器解析：media="only"

media="screen and (min-width:401px) and (max-width:600px)"                          //旧浏览器解析：media="screen"

CSS3媒体属性

• width:视口宽度
• height：视口高度
• device-width：渲染表面的宽度，就是设备屏幕的宽度。
• device-height:渲染表面的高度，就是设备屏幕的高度。
• orientation：检查设备处于横向还是纵向。
• aspect-ratio：基于视口宽度和高度的宽高比
• width/height 如：16/9，4/3
• device-aspect-ratio：渲染表面的宽度，就是设备屏幕的宽度。
• color：每个颜色的位数bits 如 ：min-color：16位，18位
• resolution：检测屏幕或打印机的分辨率 如：min-resolution:300dpi

以上属性都可以添加 min-或max- 前缀

下面介绍视口宽度和设备屏幕的宽度：

视口

桌面浏览器只有一个视口，而移动端浏览器视口分为可视视口、布局视口、理想视口。

• 放大倍数变大，改变的是可视视口，不改变布局视口。
• 用户在手机浏览器上查看网页的过程其实是滑动和缩放可视视口
• 理想视口就是布局视口在一个设备上的最佳尺寸。

理想视口就是为构建手机浏览器优化的页面而添加的

使用理想视口

<meta name="viewport" content="width=device-width"/>

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

其中 minimum-scale 为最小的缩放比例，maximum-scale 为最大的缩放比例，user-scalable 为是否禁用用户缩放

实现响应式至少有以下标签

<meta name="viewport" content="width=device-width">

扩展内容有

• 用户默认缩放比例
• 最大缩放比例
• 最小缩放比例
• 是否禁用用户缩放

图片响应式

加载与用户设备相匹配的小图片，既快速，又不影响用户的体验

主要分为两部分

1. 图片的排版和布局
2. 根据设备大小加载不同的图片

途径：

• js 或服务端
• srcset
• srcset 配合 sizes
• picture
• svg

js 实现:

$(document).ready(function(){
    function imageResponsive(){
        var width = $(window).width;
        var img = $('.content img');
        if(width<=480){
            img.attr('src','img/480.png');
        }else if(width<=800){
            img.attr('src','img/800.png');
        }else{
            img.attr('src','img/1600.png');
        }
    }
    $(window).on('resize load',imageResponsive);
});

srcset 实现：

<div class="content">
    <img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w,img/1600.png 1600w">
</div>

srcset 配合 sizes 实现：

<div class="content">
    <img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w,img/1600.png 1600w" sizes="(min-width:800px) calc(100vw - 30em),100vw">
</div>

sizes 值的含义是：宽度大于或等于 800px 时，图片宽度为 100vw - 30em，其余宽度为 100vw
在 srcset 列出图片的地址以及显示的像素，用 sizes 属性标明在什么情况下显示成怎样。

使用 picture 标签：

<div class="content">
    <picture>
        <source media="max-width:36em" srcset="img/1.jpg 768w"/>
        <source srcset="img/2.jpg 1800w"/>
        <img class="image" src="">
    </picture>
</div>

浏览器遍历 picture 标签里面的 source 标签，直到找到一个属性满足当前环境，就将此 source 里的 srcset 配置到 img 标签里，这样，针对一个 img 可以设置多个 srcset 和 sizes 。

媒体查询的条件除了是 width ，还可以很多值，如下。

<source media="orientation：landscape" srcset="img/1.jpg 768w"/>

<source type="image/svg+xml" srcset="logo.svg 480w, log.svg 800w,log.svg 1600w"/>

<source type="image/webp" srcset="logo.webp 480w, log-m.webp 800w, log-l.webp 1600w"/>

svg 是可缩放的矢量图形。
由于兼容性问题，在使用 srcset 和 sizes 时会适用 polyfill。可选择用 picturefill.js

慕课网：所向披靡的响应式开发