HTML5运用四种办法实现挪移页面自顺应手机屏幕的办法总结-

这篇文章主要介绍了HTML5挪移页面自顺应手机屏幕四类办法总结,非常拥有有用价值，需要的伴侣可以参照 下 这篇文章主要介绍了HTML5 挪移页面自顺应手机屏幕四类办法总结,非常拥有有用价值，需要的伴侣可以参照 下

1、运用meta标签：viewport

H5挪移端页面自顺应普遍运用的办法，理论上讲运用这个标签是可以顺应所有尺寸的屏幕的，但是各设施对该标签的解释方式及支撑程度不一样造成了不克不及兼容所有阅读器或系统。

viewport 是会员网页的可视区域。翻译为中文可以叫做"视区"。

手机阅读器是把页面放在一个虚拟的"窗口"（viewport）中，平常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不消把每个网页挤到很小的窗口中（这样会毁坏没有针敌手机阅读器优化的网页的布局），会员可以通过平移和缩放来看网页的不一样局部。

viewport标签极其属性：

代码如下:

每个属性的细致介绍：

2、运用css3单位rem

rem是CSS3新增的一个相对单位（root em，根em）,运用rem为元素设置字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以以免字体大小逐层复合的连锁反馈。

当前，除了IE8及更早版本外，所有阅读器均已支撑rem。关于不支撑它的阅读器多写一个绝对单位的声明。这些阅读器会忽略用rem设置的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

默许html的font-size是16px，即1rem=16px，要是某p宽度为32px你可以设为2rem。

平常状况下，为了便于盘算数值则运用62.5%，即默许的10px作为基数。固然这个基数可认为任何数值，视概括状况而定。设定办法如下：

Html{font-size:62.5%(10/16*100%)}

概括不一样屏幕下的法则定义，即基数的定义方式：可以通过CSS定义，不一样宽度范畴里定义不一样的基数值，固然也可以通过js一次定义办法如下：

    
    



    

    
打赏
    

    

    	
        
    	

    		
感谢您的支持，我会继续努力的!
    	
    	

    		
    	
    		
扫码打赏，你说多少就多少
    	

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

    		
打开支付宝扫一扫，即可进行扫码打赏哦
    		
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！