移動端通過js來用rem控制字型大小的用法

標籤：more   sel   rem   splay   adjust   type   put   mit   sub   

通過js來控制頁面字型大小，直接上代碼：

(function() { var rootHtml = $(":root"); var rootResize = function() { var fontSize = $(window).width() < 640 ? $(window).width() / 16 : 40; rootHtml.css("font-size", fontSize); } rootResize(); $(window).resize(function() { rootResize(); }); })();

接下來可以直接在頁面根項目中規定font-size的大小，這樣就可以控制整體頁面的文字大小自適應

body{width:16rem;margin:0 auto;background-color: #fff;font-size:.6rem;color:#000;}

最後總結一下 頁面中css公用樣式：

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
 body,form,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;} 
div,ul,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{zoom:1;} 
body{font-family:‘Microsoft YaHei‘;
/*-webkit-user-select:none;*/
-webkit-text-size-adjust:none;background-color: #fff;}
 input,select{line-height:normal;vertical-align:middle;}
 textarea{font-size:1em;line-height:1.5em;}
 a{text-decoration:none;color:#000;outline:0;} 
a:visited{text-decoration:none;} a:hover{text-decoration:none;} 
img{border:0;max-width:100%;} li,ul{list-style:none;} 
body{width:16rem;margin:0 auto;background-color: #fff;font-size:.6rem;color:#000;} 
.hidden{display:none;} .clear{clear:both;} .cl{clear:both;} .zleft{float:left;} .zright{float:right;} 
.zmore{color:#771d0e!important;} .zblock{display:block;} .zred{color:red!important;} /*相容蘋果*/ 
input{-webkit-appearance:none; /*去除input預設樣式*/} input[type=‘radio‘]{-webkit-appearance:radio;} input[type=‘submit‘],input[type=‘reset‘],input[type=‘button‘],input{-webkit-appearance:none;} /*相容蘋果結束*/

以上都是個人平時寫移動端頁面所需的常用css樣式

 

移動端通過js來用rem控制字型大小的用法