你们好哇~ 今天咱们聊聊个麻烦事，就是网页怎么自适应屏幕大小哦～不知道你们有没有碰到过这种烦心事？赶紧来说说
首先，网页得把整个手机屏幕搞定对，别给手机憋屈坏了！这里教你俩技巧防止这种情况发生。第一步就是给html代码里加个viewport，里面有三个数值，先让页面跟手机差不多那么点，然后把最大和最小的缩放比例都调到1，这意味着不让用户随意调整网页大小。这样一搞，网页就能随手机大小自由伸缩了！
告诉你个偷懒的小招，就是把字号换算成百分比就行~这样网页可以自动调节适合屏幕的大小，简单实用到不行！但是别忘了，用这种办法可能要额外调整下字体大小；而且要是电脑显示器超过700px的话，动态比例反而可能让界面看着太大，有点难搞。
这个事儿，还有个简单办法——rem和em搞定它。先做什么？根据媒体查询，你可以随心所欲地更改或设定字体大小。然后，别再用以前的px单位了，换成rem和em就行了，不用担心其他的。但是要记得喔，这个方法只适用于不同大小之间的移动，所以不能保证过渡得那么自然。
说白了，每种方法多多少少都会有点儿问题是不是？那咱们就把优点抽出来，缺点给避免掉，然后再巧妙地融合互补试看看呗。那天我去淘宝逛逛，看见他家网页的文字大小会根据屏幕宽度自动变化，而且这个比例是不变的。这不挺好玩儿的吗？估计是用JavaScript先探测出宽屏，然后把这个数值换成”rem”单位再做自适应设置？这个主意真不错！这样无论在哪种设备上浏览都不会出现阅读困难的问题！
Javascript写起来简单超乎想象！rem设定这种头疼事儿都轻松搞定~但是，在手机浏览器上就遇到点小问题。Safari刚开始加载网页就不停地跑Javascript，导致viewport设定的宽度失效，结果就是页面内容全被拉伸成巨无霸！吓得我一身冷汗。但是别怕，办法总是有的，setTimeout()这个神奇函数这时就能上场助阵了！
想你的网站适应各种手机屏幕？这得懂 Viewport, 比例自适应以及 REM/EM 的门道。再加上 JavaScript，就perfect。不过得留意移动版 Safari 的问题，大概用 setTimeout()解决。今儿咱就来唠唠这些干货和妙招，希望对您有帮助。有啥不懂或建议，随时找我呗，随时可以在评论区留信息！大家积极参与，评论、点赞、转发给好友，都是对我极大的支持与鼓励，真的很感谢！
评论0