(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
时间: 2024-10-13 10:19:54