现如今，随着社会发展，PC端的使用相比较于移动端的使用量显劣势。一些页面的使用也就需要重新设计。
网页的响应式开发需求也越来越大。
1.viewport属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
</head>
<body>
</body>
</html>
2.不使用绝对的宽度
也就是说平时我们使用的像素：
.container
{
width：100px;
}
就需要写成百分比的形式：width：20%；
3.使用相对文字大小
字体也不能使用绝对大小（px）,而只能使用绝对大小（rem）。
rem相对大小是相对于根元素的（html），比如html设置大小是10px 则1rem=10px，比如html是16px则1rem=16px.
在默认情况下，根元素（html）大小是16px,因此默认情况下1rem=16px;
也就是说 1rem = 10px 1.2rem=12px; 1.6rem=16px;如果想1rem=10px，则需要把html的根元素设置为10px.
例如：
html{
font-size:62.5%; //把字体大小设置为10px;10px =16px*62.5%;
}
1rem = 10px;
3.媒体查询标签
<link rel="stylesheet" type="text/css" media="screen and (max-400px) href="tinyScreen.css"/>