实现网页自适应不同尺寸 屏幕（PC端）
前言：需求是一个静态展示页面根据UI提供设计稿完成，最好是适应具有不同屏幕尺寸，具体要求没提。网上查找相关自适应布局，有很多种方案如下media 媒体查询 类似于响应式布局根据不同屏幕显示不同效果布局百分百布局实现 可能也会存才拉伸 不能百分百还原设计图bootstrap, vue项目中使用flexible.js （只要一个静态页面不用框架pass）rem布局采用2.果然通过百分比实现的页面只在和
前言：需求是一个静态展示页面根据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>添加如下注释即可
<!-- saved from url=(0013)about:internet -->
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
11
0- 0
已为社区贡献1条内容
所有评论(0)