移动网页自适应确实有点头疼，不过别泄气咱们现在就来聊聊这个，说不定就能帮到正在为此烦恼的你！
什么是viewport标签？
首先，我们来聊聊什么叫viewport？其实，它就是手机上网时看见的那块大屏。这片地方比手机小屏幕大多了，如果不这样做，网页会变得歪扭斜斜的，很丑陋。所以记住要用viewport标签调整大屏的大小
这Viewport可不是盖的，有好几个参数。首先，这个tag可以设定浏览器窗口的大小（width，height）；然后再说说，它还能设置打开网页时自动缩小的比例（initial-scale）。当然，最重要的是，它能控制网页的最小和最大缩放倍数（minimum-scale和maximum-scale），这下子无论是大屏还是小屏都能看得清清楚楚了。最后，它还能让你手动调节页面大小（user-scalable），真是太方便了！
viewport标签的兼容性问题
虽然有viewport标签可以解决各种尺寸手机怪异的网页显示，但是因为各家设备对于这么个小东西的理解和反应有点儿不太一样，所以有时候还是会有点儿小问题的。比如，有些时候你的浏览器或者操作系统可能压根儿就看不懂这个标签，这可让我们这些做前端的人头疼了！
User-Scalable和Initial-Scale调不好？放心，咱们程序员多试试就好了，总能找到合适的。
使用css3单位rem
赶快试试CSS3里的REM单位！只需要动下HTML根元素，就可以搞定整个文章的字号~以后字看久了也不会觉得累~
无论你用新潮的还是古老的IE8浏览器，REM都是适用的。如果还有哪个浏览器不能识别，那就在样式表里加一段指定字体大小的代码就搞定了。那么REM就可以不用操心！
rem的设置方法
HTML里默认字号是16像素哒，咱们这儿就假定REM就是16像素。比如，假如某个P标签宽32像素，那就得换算成2REM。为了方便计算，我们习惯用62.5%。所以，直接按照默认的10像素来变准没错。当然，具体怎么换还得看你自己需要啥。
想让电脑桌面在各种屏幕都好用吗？不需要懂得CSS也能做到，跟着我学，超简单！比如，根据屏幕大小设定相应数字就好，方便又实用。再者，用个JavaScript小助手，帮你统一设置所有规则，爽爆了哟～
使用媒体查询
p {font-size:14px; font-size:.875rem;}
媒体查询，就好比CSS3里的魔法棒，可以让手机页面变得美美的。它就像个化妆师，会根据不同的媒体环境，给CSS穿上最适合的衣服。别小瞧了这个”媒体”，它可不仅仅是网页大小，还得考虑你用什么设备和屏幕大小！
告诉你个事儿，当你的浏览器窗口缩小到小于500像素时，网站的背景就会变成淡淡的蓝色。这个小变化能帮助我们更好地适应各种设备，还能解决许多设计和格式上的麻烦！
媒体查询的局限性
虽然媒体查询功能挺好使，但是遇上特难搞的网页布局还是挺棘手的。比如，你要是遇到一大堆嵌套的父级元素和子级元素，那可真是让人头疼！这是为啥？就是因为百分比总是随着父级元素的变化而变化。父级元素一变大，子级元素也会跟着长大。所以咱们在开发的时候，不能光顾着看电脑屏幕，还得想想手机和平板上的显示效果咋样。
Html{font-size:62.5%(10/16*100%)}
其他自适应方法
其实，面对变化咱们可以换个法子对付！比如用Flexbox布局，或者用Bootstrap这种框架来帮忙搞定。不过别太依赖这个方法，主要是得看实际情况挑个最好的应对策略哈。
简单讲用Flexbox做网页看着是挺炫的，但有些浏览器就是兼容不了；Bootstrap倒是挺方便的，就是有时候样式看起来怪怪的，得费点劲儿调整一下。
(function (doc, win) { var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
总结
想要做出流畅适配各种手机屏幕的H5移动版页，你得把它当作家里的装修来对待！关键就是搞定viewport标签和rem单位这两样东西，还有别忘了利用媒体查询这个神助手哈。初学者，多尝试，多动手，不管啥手机屏幕尺寸，都能看得一清二楚！
聊聊怎么调整手机网页大小呗~别忘了到评论区分享下你的经验！记得给我点个赞
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}}
评论0