移动端 html基值（转载）

最新推荐文章于 2022-10-09 00:21:51 发布

weixin_30670965

最新推荐文章于 2022-10-09 00:21:51 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dongxiaolei/p/6322584.html

本文介绍了一种利用REM单位实现响应式布局的方法，可根据设备宽度动态调整字体大小，进而灵活改变页面元素的宽高及间距。

(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.youkuaiyun.com/huang100qi/article/details/49886713

转载于:https://www.cnblogs.com/dongxiaolei/p/6322584.html