em,rem单位:
rem是相对于html中的font-size字体大小而言的,随着html的字体大小改变而变化。
em是相对于父级标签字体大小而言,1em相对于父级标签字体大小(仅用于font-size中),除此之外,用到的em单位,都是相对于该标签字体大小倍数而言的。
在响应式布局中,一般如下操作:
1.标签中的字体大小不使用固定值,使用相对值(em,rem);
2.标签的位置和宽高大小使用百分比布局或者rem
3.选择性的使用css样式(媒体查询),根据网页大小尺寸设置符合需求的样式
4.如果需要适配移动端,则需要添加viewport设置当前宽度为设备宽度,同时让传统的pc端网站能够在移动端正常显示;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>em</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
/* rem永远相对于body和,html而言 */
body,html{
font-size: 20px;
}
#one{
width:800px;
height:600px;
background-color:red;
font-size: 30px;
}
#two{
width:30rem; /* =600px */
height:400px;
background-color:blue;
/* em字体大小是相对于父级字体大小而言 */
/* 字体最小值是9px */
/* font-size: 0.5em; */ /* 规定该标签的字体大小,相当于是15px */
/* text-indent:2em; 一个字符是15px,2em就是30px */
/* font-size: 3rem; */ /* =60px */
}
#three{
width:400px;
height:300px;
background-color: pink;
font-size: 0.5em;
font-size: 3rem;
}
</style>
</head>
<body>
<div id="one">one
<div id="two">two
<div id="three">
three
</div>
</div>
</div>
</body>
</html>