移动端 html基值(转载)

(function () {
          document.addEventListener('DOMContentLoaded', function () {
              var html = document.documentElement;
              var windowWidth = html.clientWidth;
              html.style.fontSize = windowWidth / 6.4 + 'px';
              // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
          }, false);
      })();

这个6.4就是根据设计稿的横向宽度640来确定的,假如你的设计稿是750

那么 html.style.fontSize = windowWidth / 7.5 + 'px';

(1)至此,font-size的基础值就确定好了,而且知道该font-size值是手机deviceWidth跟设计稿的比例值的100倍(重要)

(2)那么页面元素该如何设置宽高、边距

  例如:一个设计稿宽高为140px的图标,左边距为50px,那么它的css应该这样写

.icon {
    width: 1.4rem; /* 像素换算rem:140px / 100 = 1.4rem */
    height: 1.4rem;
    margin: 0 0 0 .5rem;
}

因为html的font-size是放大了100倍,所以计算rem时,要用设计稿的实际像素除以100,140px /100 =1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽的比例自动计算出来。

 源自:http://blog.csdn.net/huang100qi/article/details/49886713

posted @ 2017-01-20 13:13  dongxiaolei  阅读(195)  评论(0编辑  收藏  举报