引用js，自动算字体大小,响应式布局
<script>
var iScale = 1;
iScale = iScale / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">');
/* 动态设置字体大小*/
function htmlFontSizeChange() {
var iWidth = document.documentElement.clientWidth;
document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';
console.log("1rem = " + iWidth / 16);
}
htmlFontSizeChange();
$(window).resize(function() {
htmlFontSizeChange();
});
</script>
<style>
body{
font-size:1rem; /*(16px)/(iWidth/16) (iWidth设计图宽)*/
}
</style>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var iScale = 1;
iScale = iScale / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">');
/* 动态设置字体大小*/
function htmlFontSizeChange() {
var iWidth = document.documentElement.clientWidth;
document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';
console.log("1rem = " + iWidth / 16);
}
htmlFontSizeChange();
$(window).resize(function() {
htmlFontSizeChange();
});
</script>
<style>
span {
font-size: 0.21333333rem;
/*设计图大小为1200，16/(1200/16)*/
/*font-size: 16px;*/
}
div {
0.4rem;
/*30/(1200/16)*/
/* 30px;*/
background: red;
height: 0.4rem;
}
</style>
</head>
<body>
<span>设计图宽度为1200</span>
<div></div>
</body>
</html>
直接使用css设置rem
html{
font-size:62.5%; /* 10÷16=62.5% */
}
body{
font-size:12px;
font-size:1.2rem ; /* 12÷10=1.2 */
}
媒体查询
@media only screen and (min-width: 481px){
html {
font-size: 94%!important;/* 15.04÷16=94% */
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important; /* 17.44÷16=109% */
}
}
@media only screen and (min-width: 641px){
html {
font-size: 125%!important;/* 20÷16=125% */
}
}