<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css适配</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<style type="text/css">
body{
margin: 0 ;padding: 0;font-size: 0.32rem;
/*0.32*50px(320屏幕宽度下html是50px)是16px
0.32*50px(414屏幕宽度下html是64.68px)是20px
0.32*50px(768屏幕宽度下html是120px)是38px*/
}
div{
width: 3.2rem;height: 3.2rem ;background: red;
}
</style>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
</script>
</head>
<body>
<div>
<span class="demo">测试</span>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var font=$(".demo").css('font-size');
console.log("字体大小:",font);
});
</script>
</html>
css字体适配rem 根据屏幕大小变换字体大小
最新推荐文章于 2024-08-15 09:01:33 发布