响应式布局想法和实现 -尊龙游戏旗舰厅官网

看过这篇文章，写的挺全面， 从几个方面分析响应式写法优劣，先收藏：

http://caibaojian.com/web-app-rem.html

最终方案：

rem是通过根元素进行适配的，网页中的根元素指的是html，我们通过设置html的字体大小就可以控制rem的大小。

下面函数将屏幕宽度和根元素字体大小联系起来，而页面内元素宽度都是通过rem来设置，如750页面最大宽度也就是7.5rem，字体16px =>0.16rem。

页面大小变化时，根元素html大小相应变化，内部元素随rem变化相应改变，来达到响应效果。

//designwidth:设计稿的实际宽度值，需要根据实际设置 //maxwidth:制作稿的最大宽度值，需要根据实际设置 //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750) (function(designwidth, maxwidth) {var doc = document,win = window,docel = doc.documentelement,remstyle = document.createelement("style"),tid;function refreshrem() {var width = docel.getboundingclientrect().width;maxwidth = maxwidth || 540;width>maxwidth && (width=maxwidth);var rem = width * 100 / designwidth;remstyle.innerhtml = 'html{font-size:' rem 'px;}';}if (docel.firstelementchild) {docel.firstelementchild.appendchild(remstyle);} else {var wrap = doc.createelement("div");wrap.appendchild(remstyle);doc.write(wrap.innerhtml);wrap = null;}//要等 wiewport 设置好后才能执行 refreshrem，不然 refreshrem 会执行2次； refreshrem();win.addeventlistener("resize", function() {cleartimeout(tid); //防止执行两次tid = settimeout(refreshrem, 300);}, false);win.addeventlistener("pageshow", function(e) {if (e.persisted) { // 浏览器后退的时候重新计算 cleartimeout(tid);tid = settimeout(refreshrem, 300);}}, false);if (doc.readystate === "complete") {doc.body.style.fontsize = "16px";} else {doc.addeventlistener("domcontentloaded", function(e) {doc.body.style.fontsize = "16px";}, false);} })(750, 750);

 扩展阅读：https://www.cnblogs.com/tiger95/p/7941341.html （3个方案：1.rem 625%  2.网易  3.淘宝）

转载于:https://www.cnblogs.com/lola/p/9597272.html

总结

以上是尊龙游戏旗舰厅官网为你收集整理的响应式布局想法和实现的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。