手机端如何用rem+scss做适配-

这次给大家带来手机端如何用rem+scss做适配，手机端做rem+scss适配的注意事项是什么，下面就是实战案例，一起来看一下。 这次给大家带来手机端如何用rem+scss做适配，手机端做rem+scss适配的注意事项是什么，下面就是实战案例，一起来看一下。

rem介绍

rem（font size of the root element）是指相关于根元素（即html元素）的字体大小的单位。

假如根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如

html{
    font-size: 10px;
}
p{
    width: 2rem; /* 2*10 = 20px;*/
    margin: 1rem;
}

rem来做适配

之前我们往往这样做页面：viewport width 设定为 device-width，然后选我们需要兼容设施的最小宽度（个别是320px）。依据这最小宽度来做页面。单位运用px和百分比。在宽度不一样的设施上，页面的字体大小，内容尺寸都是同样的，不一样的是，大屏的内容间的闲暇比小屏的大。所以这样做的缺陷就是，页面在某些尺寸的设施上显示的结果欠好。

要是用rem来页面，我们会依据不一样的设施宽度在根元素上设定不一样的字体大小。宽度越宽，字体越大。然后对原本运用px的地方运用rem来替代。这样，字体大小，内容尺寸，对随着屏幕宽度的变大而变大。

第一js设定html的默许字体大小（写在html头部）

    
    



    

    
打赏
    

    

    	
        
    	

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

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

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

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