Diferentes tamaños de pantalla de H5 muestran diferentes tamaños de texto y tamaños de imagen

Diferentes tamaños de pantalla de H5 muestran diferentes tamaños de texto y tamaños de imagen

Principio : identifique el ancho de la pantalla y use el juicio JS para asignar diferentes tamaños

Tamaño del texto (parte HTML)

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

Tamaño del texto (parte 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>

Tamaño de la imagen (parte HTML)

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

Tamaño de imagen (parte 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>

Supongo que te gusta

Origin blog.csdn.net/qq_36678880/article/details/126139268
Recomendado
Clasificación