网页响应式设计原理

时间 2019-12-09

标签网页响应设计原理栏目 HTML 繁體版

原文原文链接

现现在，随着社会发展，PC端的使用相比较于移动端的使用量显劣势。一些页面的使用也就须要从新设计。css

网页的响应式开发需求也愈来愈大。html

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>spa

　　　　2.不使用绝对的宽度scala

　　　　　　　　也就是说平时咱们使用的像素：设计

.containerhtm

{ip

width：100px;开发

}rem

　　就须要写成百分比的形式：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.媒体查询标签