浅谈Web自适应

iphone6s: 1240 : 194

var deviceWidth = window.documentElement.clientWidth;

document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

为了进步机能，让代码开起来加倍完美，可认为它加上撙节阀函数:

在head中，我们将以上代码参加，动态地改变根节点的font-size值，获得如下结不雅:

接下来我们可以根据根元素的字体大年夜小用rem设置各类属性的相对值。当然，如不雅是移动设备，屏幕会有一个高低限制，我们可以控制分辨率在某个范围内，跨越了该范围，我们就不再增长根元素的字体大年夜小了:

var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; 
 
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

window.onresize = function(){ 
 
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; 
 
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px'; 
 
};

window.onresize = _.debounce(function() { 
 
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; 
 
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px'; 
 
}, 50);

顺带解决高保真标注与实际开辟值比例问题

如不雅你们设计稿标准是iphone5，那么拿到设计稿的时刻必定会发明，完全不克不及按照高保真上的标注来写css，而是将各个值取半，这是因为移动设备分辨率不一样。设计师们是在真实的iphone5机械上做的标注，而iphone5系列的分辨率是640，实际上我们在开辟只须要按照320的标准来。为了节俭时光，不至于每次都须要将标注取半，我们可以将全部网页缩放比例，模仿进步分辨率。这个做法很简单，为不合的设备设置不合的meta即可:

var scale = 1 / devicePixelRatio; 
 
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

应用css新属性media query 特点也可以实现我们上说到过的构造样式。为尺寸设置根元素字体大年夜小:

如许设置同样可以解决在安卓机械下1px像素看起来过粗的问题，因为在像素为1px的安卓下机械下，边框的1px被紧缩成了0.5px了。总之是一劳永逸!淘宝和网易消息的手机web端就是采取以上这种方法，自适应各类设备屏幕的，大年夜家有兴趣可以去参考参考。下面是完全的代码:

<!DOCTYPE html> 
 
<html> 	
			 2/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　京东“618”在即，这些“京东版”的黑科技你知道吗?
            
            【51CTO.com原创稿件】2017年贵阳数博会方才停止，京东&ldquo;618&rdquo;狂欢节却早已打响&hellip;&hellip;早在6月1日，京东集团提议的&ldquo;618年中购物节&rdquo;就正式拉开了序幕，京东>>>详细阅读


本文标题：浅谈Web自适应
地址：http://www.17bianji.com/lsqh/35584.html
 1/2    1