rem适配方案

页面布局单位计算一般有两大类：绝对长度单位和相对长度单位

　　绝对长度单位：

- px 像素：是显示屏上显示的每一个小点，为显示的最小单位
- in 英寸，1in = 96px
- cm 厘米，1cm = 37.8px
- mm 毫米，1mm = 3.78px
- pt 磅，1pt = 1/72 英寸

　　推荐使用 px（像素）

　　相对长度单位：

- em　相对于当前元素的字体大小(font-size) ,当前元素未设置字体大小依赖其父元素字体大小一级级向上查找 1em= 1 × 当前元素字体大小;
- rem 相对于根元素的字体大小(font-size),计算公式 1rem =1 × 根元素字体大小;
- % 目标元素宽度/父级元素宽度=百分比宽度 ;
- ex & ch 相对于元素字符字体宽高
  - ex 　取自字符x的高度
  - ch 基于'0'这个字符字体的宽度计算
- vw & vh 　根据 视口(浏览器可视化的区域) 的宽高计算
  - vw 当前视窗宽度的 1%
  - vh 当前视窗高度的 1%
- vmin & vmax 当前vw和vh中较小或者较大的值

目前 IE8一下不支持 rem,IE9,10部分不支持

如果这个属性根据它的font-size进行测量，则使用em

其他的视情况使用对应单位.

rem 几种方法:

js计算

    <script>

   /*让文字和标签的大小随着屏幕的尺寸变化 等比缩放*/

     var html = document.getElementsByTagName('html')[0];

     /*取到屏幕的宽度*/

     var width = window.innerWidth;

     var fontSize = 100/640*width;

     html.style.fontSize = fontSize +'px';

     window.onresize = function(){

         var html = document.getElementsByTagName('html')[0];

         var width = window.innerWidth;

         var fontSize = 100/640 * width;

         /*设置fontSize*/

         html.style.fontSize = fontSize +'px';

     }

 </script>

使用媒体查询:

@media (max-width:768px){

    html {

　　　　font-size:16px;

　　}

}

巴特西

rem适配方案

最新文章

热门文章