首页 > Web开发 > 详细

html基值 仿淘宝

时间:2017-01-20 15:46:26      阅读:273      评论:0      收藏:0      [点我收藏+]
$(function(){
            var scale = 1 / devicePixelRatio;
            document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px‘;
        });

1)布局的时候,各元素的css尺寸=psd上元素的尺寸/(设计稿横向总宽/10)。

2)font-size可能需要额外的媒介查询,并且font-size不使用rem。

拿淘宝来说的,他们用的设计稿是750的,所以html的font-size就是75,如果某个元素时150px的宽,换算成rem就是150 / 75 = 2rem。

注:

跟网易一样,淘宝也设置了一个临界点,当设备竖着时横向物理分辨率大于1080时,html的font-size就不会变化了,原因也是一样的,分辨率已经可以去访问电脑版页面了。

html基值 仿淘宝

原文:http://www.cnblogs.com/dongxiaolei/p/6322857.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!