@media screen and (max-width: 750px){
html {
font-size:30px;
}
}
@media screen and (min-width:640px) and (max-width:749px){
html {
font-size:25px;
}
}
@media screen and (min-width:480px) and (max-width:639px){
html {
font-size:20px;
}
}
@media screen and (min-width:320px) and (max-width:479px){
html {
font-size:15px;
}
}
引入
em
是相对长度单位。相对于当前对象内文本的字体尺寸。如果当先元素设置 字体的font-size,则会继承父元素的大小。
可以看出宽、高同样设置成1em* 1em 的两个元素,它们表现出来的大小却不一样,原因是em的大小由元素内部的font-size决定。
rem
rem是CSS3新增的一个相对单位(root em,根em),与em相比,相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
设置rem的方法: