移动端字体大小适配

接下来是个人的理解,网上的资料太杂太乱,得细心看才能找到精华。

css3字体有了“rem”单位,来解决屏幕适配问题。

它与px的区别:px设置了字体大小就不可变,rem是可以根据根元素html的字体的大小而变化的。

接下来就是用法:

原理:随着html的font-size的变化,rem变化。

思路:只要我算出来不同屏幕字体比例大小就可以了。

vw是 Viewport宽度, 1vw 等于viewport宽度的1%;vh是 Viewport高度, 1vh 等于viewport高的的1%;

假设设计图是根据iphone6来设计的,iphone6的宽度为375px,100vw(等于viewport宽度的100%)是屏幕的宽度,

100vw/3.75=100px;所以在这里1rem=100px;

一些浏览器不支持font-size: calc(100vw/3.75); 所以js加一句$("html").css("font-size",(window.innerWidth)/3.75 + 'px');



	
		
		
		
		
		
	
	
	
		

南京的价位的会计文件看看南京的价位的会计文件看看

经常见的好成绩房东

哈萨感觉到过十多个





你可能感兴趣的:(移动端字体大小适配)