现如今,随着社会发展,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-width:400px) href="tinyScreen.css"/>