首页 > 代码库 > 移动端 html基值（转载）

移动端 html基值（转载）

2024-09-01 19:19:12   216人阅读

(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

移动端 html基值（转载）


联系
我们