实现网页自适应不同尺寸屏幕（PC端）-白红宇的个人博客

实现网页自适应不同尺寸屏幕（PC端）

发布日期：2022-03-08 21:50:43 浏览次数：4 分类：技术文章

本文共 1214 字，大约阅读时间需要 4 分钟。

前言：需求是一个静态展示页面根据UI提供设计稿完成，最好是适应具有不同屏幕尺寸，具体要求没提。

网上查找相关自适应布局，有很多种方案如下

media 媒体查询类似于响应式布局根据不同屏幕显示不同效果布局

百分百布局实现可能也会存才拉伸不能百分百还原设计图

bootstrap, vue项目中使用flexible.js （只要一个静态页面不用框架pass）

rem布局

采用2.果然通过百分比实现的页面只在和设计稿同等宽度屏幕效果最完美，其余会有不同程度拉伸。

采用rem布局方式

什么是rem布局？

百度官方解释

rem（font size of the root element）是指相对于根元素的字体大小的单位

经过搜索找到，通过js代码，根据获取到的屏幕宽度，动态修改html标签中fontSize的px单位的值

(function(doc,win){    let fn = () => {        let docEl = doc.documentElement,            clientWidth = docEl.clientWidth;        if (!clientWidth) return;        docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';            }    if (!doc.addEventListener) return;    win.addEventListener('resize',fn);    doc.addEventListener('DOMContentLoaded',fn);    })(document,window);

其中1920就是UI设计稿提供的宽度，这样就算是屏幕不是1920也可以根据比例放大缩小，实现百分百还原设计稿。

对应的css样式中 1rem=100px; 根据设计稿效果还原即可

IE兼容问题

测试发现IE效果和其他浏览器不同，开始定位问题发现

根元素fontSize 没有被设置成功，打开开发者模式发现

好家伙竟然是IE不兼容ES6语法，果断把箭头函数改成正常function解决

function fn (){        let docEl = doc.documentElement,            clientWidth = docEl.clientWidth;        if (!clientWidth) return;        docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';            }

再次打开IE发现显示IE阻止了这个控件，必须点击允许才能显示页面正常大小，百度一圈发现在<head></head>添加如下注释即可

转载地址：https://blog.csdn.net/m0_55571138/article/details/122368014 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：React getFieldDecorator initialValue第一次设置初始值之后初始值再改变失效

下一篇：react不用正则校验数学公式合理简单高效的方法

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章