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

最新推荐文章于 2024-05-06 11:15:15 发布

糊涂的秋风

最新推荐文章于 2024-05-06 11:15:15 发布

阅读量572

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_36678880/article/details/126139268

版权

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>