原生实现rem响应式
<!DOCTYPE html>
<html style="font-size: 100px">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title></title>
<script>
/*让文字和标签的大小随着屏幕的尺寸做变话 等比缩放*/
var html = document.getElementsByTagName(‘html‘)[0];
console.log(html);
/*取到屏幕的宽度*/
var width = window.innerWidth;
console.log(width);
/* 640 100 320 50 */
var fontSize = 100/640*width;
console.log(fontSize);
/*设置fontsize*/
html.style.fontSize = fontSize +‘px‘;
window.onresize = function(){
var html = document.getElementsByTagName(‘html‘)[0];
console.log(html);
/*取到屏幕的宽度*/
var width = window.innerWidth;
console.log(width);
/* 640 100 320 50 */
var fontSize = 100/640 * width;
console.log(fontSize);
/*设置fontsize*/
html.style.fontSize = fontSize +‘px‘;
}
</script>
<style>
body,html{
margin: 0;
padding : 0;
}
div{
width: 5.28rem;
height: 1rem;
background: red;
color: #fff;
font-size: 0.16rem;
}
</style>
</head>
<body>
<div>AAA</div>
</body>
</html>
jq实现rem响应式
$(function(){
$(window).on(‘resize‘,function(){
var width=$(window).width();
var fontSize=(width/640)*100;
$(‘html‘).css(‘font-size‘,fontSize)
}).trigger(‘resize‘)
})
原文地址：https://www.cnblogs.com/zbx-boke/p/9571721.html
时间： 2024-12-09 20:45:55