H5不同屏幕大小显示不同的文字大小图片大小

H5不同屏幕大小显示不同的文字大小图片大小
原理:识别屏幕宽度,利用JS的判断进行分配不同的尺寸
文字大小(HTML部分)

<div id="size">大小文字</div>

文字大小(JS部分)

<script>
var value = window.screen.width;
//当宽度【小于】321,文字大小为17px
if (value<'321'){
document.getElementById('size').style.fontSize='17px';
//当宽度【大于】321,文字大小为20px
}else if (value>'321'){
document.getElementById('size').style.fontSize='20px';
}
</script>

图片大小(HTML部分)

<img id="height" src="地址">

图片大小(JS部分)

<script>
var value = window.screen.width;
//当宽度【小于】321,图片高度为300
if (value<'321'){
document.getElementById('height').height=200;
//当宽度【大于】321,图片高度为300
}else if (value>'321'){
document.getElementById('height').height=300;
}
</script>
posted @ 2022-08-03 14:14  糊涂的秋风  阅读(59)  评论(0)    收藏  举报