接下来是个人的理解,网上的资料太杂太乱,得细心看才能找到精华。
css3字体有了“rem”单位,来解决屏幕适配问题。
它与px的区别:px设置了字体大小就不可变,rem是可以根据根元素html的字体的大小而变化的。
接下来就是用法:
原理:随着html的font-size的变化,rem变化。
思路:只要我算出来不同屏幕字体比例大小就可以了。
vw是 Viewport宽度, 1vw 等于viewport宽度的1%;vh是 Viewport高度, 1vh 等于viewport高的的1%;
假设设计图是根据iphone6来设计的,iphone6的宽度为375px,100vw(等于viewport宽度的100%)是屏幕的宽度,
100vw/3.75=100px;所以在这里1rem=100px;
一些浏览器不支持font-size: calc(100vw/3.75); 所以js加一句$("html").css("font-size",(window.innerWidth)/3.75 + 'px');
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<style>
html {
font-size: calc(100vw/3.75);
}
div {
font-size: 0.14rem;
}
p,
h1,
strong {
padding: 0px;
margin: 0px;
}
</style>
<body>
<div>
<p>南京的价位的会计文件看看南京的价位的会计文件看看</p>
<h1>经常见的好成绩房东</h1>
<strong>哈萨感觉到过十多个</strong>
</div>
<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("html").css("font-size", (window.innerWidth) / 3.75 + 'px');
});
</script>
</body>
</html>