网页响应式设计原理

现如今，随着社会发展，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.媒体查询标签