移动端经过js来用rem控制字体大小的用法

经过js来控制页面字体大小,直接上代码:css

(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的大小,这样就能够控制总体页面的文字大小自适应web

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

最后总结一下 页面中css公共样式:app

*{-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样式字体

相关文章
相关标签/搜索