<! DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1" >
< title >rem布局——rem+js </ title >
</ head >
< style type= "text/css" >
html {
font-size: 32px;
/* 320/10 */
}
body {
font-size: 16px;
/* 修正字体大小 */
/* 防止页面过宽 */
margin: auto;
padding: 0;
width: 10rem;
/* 防止页面过宽 */
outline: 1px dashed green;
}
/* js被禁止的回退方案 */
@media screen and ( min-width: 320px) {
html {
font-size: 32px
}
body {
font-size: 16px;
}
}
@media screen and ( min-width: 481px) and ( max-width: 640px) {
html {
font-size: 48px
}
body {
font-size: 18px;
}
}
@media screen and ( min-width: 641px) {
html {
font-size: 64px
}
body {
font-size: 20px;
}
}
noscript {
display: block;
border: 1px solid #d6e9c6;
padding: 3px 5px;
background: #dff0d8;
color: #3c763d;
}
/* js被禁止的回退方案 */
.p1,
.p2 {
border: 1px solid red;
margin: 10px 0;
}
.p1 {
width: 5rem;
height: 5rem;
font-size: 1.2em;
/* 字体使用em */
}
.s1 {
font-size: 1.2em;
/* 字体使用em */
}
.p2 {
width: 4rem;
height: 4rem;
}
.s2 {
font-size: 1.2em
/* 字体使用em */
}
< / style >
< body >
< noscript >开启JavaScript，获得更好的体验 </ noscript >
< div class= "p1" >
宽度为屏幕宽度的50%，字体大小1.2em
< div class= "s1" >
字体大小1.2.em
</ div >
</ div >
< div class= "p2" >
宽度为屏幕宽度的40%，字体大小默认
< div class= "s2" >
字体大小1.2em
</ div >
</ div >
</ body >
</ html >
< script type= "text/javascript" >
var documentElement = document. documentElement;
function callback() {
var clientWidth = documentElement. clientWidth;
// 屏幕宽度大于780，不在放大
clientWidth = clientWidth < 780 ? clientWidth : 780;
documentElement. style. fontSize = clientWidth / 10 + 'px';
}
document. addEventListener( 'DOMContentLoaded', callback);
window. addEventListener( 'orientationchange' in window ? 'orientationchange' : 'resize', callback);
< / script >