响应式设计

一.什么是响应式设计

　响应式设计就是在网站开发过程中根据用户操作以及设备的环境进行相应的操作和布局，让网站针对不同系统平台、屏幕尺寸、屏幕定向等进行智能化调整，进行相对应的布局，如在pc端、iphone、Android、ipad，实现了在智能手机和平板电脑等多种智能移动终端浏览效果的流畅，防止页面变形，能够使页面自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备，并可在任一浏览终端进行网站数据的同步更新，可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

二.Viewport

Viewport:用户网页的可视区域（视区）。

Viewport用于meta标签如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width:控制viewport的宽度，可以设置具体值也可以设置为特殊值。device-width为设备宽度（单位是缩放为100%的css的像素）。
height：控制高度，同上。

initial-scale：初始缩放比例，也是当页面第一次load（加载）的时候缩放比例。

maximum-scale:允许用户缩放到的最大比例。minimum-scale:最小。

user-scalable：用户是否可以手动缩放。

三.媒体查询media

@media查询可以实现针对不同的媒体类型定义不同的样式。
比如：

@media only screen and (max-width: 500px) {
    body {
        background-color: blue;
    }
}

当浏览器窗口小于500px时，背景颜色将会变成蓝色。这算是个media的标准写法。

screen是告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是有的网站都会直接省略screen，当网站不需要考虑用户去打印时，可以省略screen。

media的用法

1.head标签中引用

<link rel = "stylesheet" href = "index.css" media = "screen and (max-width:800px)">

2.在css中引用

@media screen and (max-device-width:960px){
  body{background-color:red;}
}

混合使用可以是

@media screen and (max-device-width:960px) and (min-device-width:500px){
  body{background-color:red;}
}

当设备屏幕宽度小于等于960px时应用css样式。

media常用的几个参数：

四.vh和vw

1vw相当于可视窗口的宽度的1%；
1vh相当于可视窗口的高度的1%；

用vh和vw也可以实现响应式设计。