Different screen sizes of H5 display different text sizes and image sizes

Different screen sizes of H5 display different text sizes and image sizes

Principle : Identify the screen width and use JS judgment to allocate different sizes

Text size (HTML part)

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

Text size (JS part)

<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>

Image size (HTML part)

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

Image size (JS part)

<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>