手機端rem 用法

標籤：簡單的   class   計算   tag   htm   col   font   ade   function   

!function(n){    var  e=n.document,         t=e.documentElement,         i=720,         d=i/100,         o="orientationchange"in n?"orientationchange":"resize",         a=function(){             var n=t.clientWidth||320;n>720&&(n=720);             t.style.fontSize=n/d+"px"         };         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))}(window);

方法2

window.onload = function(){    /*720代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這裡寫100是      為了以後好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/    getRem(720,100)};window.onresize = function(){    getRem(720,100)};function getRem(pwidth,prem){    var html = document.getElementsByTagName("html")[0];    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;    html.style.fontSize = oWidth/pwidth*prem + "px";}

首先，先說一個常識，瀏覽器的預設字型高都是16px

 

基本思路就是：利用rem單位，就是相對於跟（html）字型的大小，來計算相應元素的寬高一般將html的font-size設定為：20px或30px或50px或100px還有利用瀏覽器預設自己大小(16px)也就是16px*62.5%=10px，這樣就是html{font-size:62.5%;}，而不是html{font-size:10px;}因為瀏覽器（PC）最小就是12px。這樣一來1rem = 10px；我們來簡單的看一下：<div id="wrap">      <div id="div1">我是一個div標籤</div></div>CSS設定樣式#wrap{   
 font-size: 20px;
}#div1{      font-size: 1em;    width: 16em;     height: 2em;   background-color: lawngreen;}

　　

 

手機端rem 用法