移动端字体设置rem。和兼容。

移动端字体单位font-size选择px还是rem?

一:做少部分手机适配可以用px。

二:当要适配各种手机端设备时用rem。

*二:

1.使用rem来设置Web页面的字体大小;

2.rem是相对于根元素<html>;

3.rem能等比例适配所有屏幕

4.在根元素<html>中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有 

设置,将是以“16px”为基准 );


引入css代码如下:

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

***1rem=100px;

二:兼容移动设备;

插入js文件   autoFontsize.min.js    

(function(d,c){var e=d.documentElement,b="orientationchange" in window?"orientationchange":"resize",a=function(){var f=e.clientWidth;if(!f){return}if(f>640){f=640}e.style.fontSize=100*(f/640)+"px"};if(!d.addEventListener){return}c.addEventListener(b,a,false);d.addEventListener("DOMContentLoaded",a,false)})(document,window);

猜你喜欢

转载自blog.csdn.net/lemonly007/article/details/80476446
今日推荐