1.首先看封装好的js代码

//作用: 根据不同手机比例(宽度)设置不同的html的font-size//理解: 直接定义函数, 直接调用函数
//传入2个参数:
//  document 表示文档对象
//  window  窗口对象
(function(doc, win, undefined) {//同时定义了3个对象, 根元素, 事件名, 匿名函数var docEl = doc.documentElement,resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',recalc = function() {//核心代码//(1) 获取文档的宽度var clientWidth = docEl.clientWidth;//(2) 如果文档宽度获取失败, 直接返回if(clientWidth === undefined) return;//(3) 根据当前窗口的大小设置html元素的font-size的值//    iphone4,iphone4s,iphone5,iphone5s设备都是320点//         很多UI设计稿320px//  当前屏幕320, 1rem = 100px      320px = 3.2rem//   当前屏幕640, 1rem = 200px//    当前屏幕750, 1rem = 200px////  整个屏幕多宽  //  750px = 1remdocEl.style.fontSize = 100 * (clientWidth / 750) + 'px';//docEl.style.fontSize = clientWidth  / 7.5 + 'px';console.log("1rem = "+docEl.style.fontSize);};if(doc.addEventListener === undefined) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

如果给的ui图的宽度为650px
docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px’; 中的750就修改为650

2.在样式中设置一个默认的字体大小

html{
font-size: 16px;
}

3.写样式时ui图所量宽度为60px,rem布局中为0.6rem(也就是说 `60px = 0.6rem`)

4.最后正常布局就好啦!

rem布局封装及使用相关推荐

移动端rem布局基本介绍及原理
rem布局 em和rem的认识在布局中,除了px之外,还有两个常见的单位,em和rem em: 相对于当前元素的字体大小→ 1em = 当前标签的font-size rem: 相对于根元素(html ...
vue怎么vw布局好用_vue 实现 rem 布局的或者 vw 布局的方法
vue 实现 rem 布局的或者 vw 布局的方法一.实现 rem 布局移动端 name="viewport" content="width=device-widt ...
移动端页面自适应解决方案—rem布局(进阶版)
之前的一篇<手机端页面自适应解决方案-rem布局>随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem布局(进阶版) 该方案使用相当简单,把下面这 ...
移动端页面自适应解决方案—rem布局
移动端页面自适应解决方案-rem布局参考文章: (1)移动端页面自适应解决方案-rem布局 (2)https://www.cnblogs.com/Vayne-N/p/6903590.html 备忘一 ...
第130天：移动端-rem布局
一.关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
[css] 使用rem布局时怎样合理设置根标签字体大小？
[css] 使用rem布局时怎样合理设置根标签字体大小? UI出2倍稿,然后用js计算当前设备和UI设计稿之间的比例关系,通过resize实时计算根标签字体大小,即可. 个人简介我是歌谣,欢迎和大家 ...
[css] 当页面采用rem布局时，如何解决用户设置字体大小造成的页面布局错位？
[css] 当页面采用rem布局时,如何解决用户设置字体大小造成的页面布局错位? 禁止用户缩放页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
rem布局 html,移动端h5之rem布局／px2rem
rem布局之媒体匹配最早的时候用的rem适配方法,通过手动设置媒体查询对不同设备进行设置font-size // 自适应 // ------------------------ html{ font ...

rem布局封装及使用

1.首先看封装好的js代码

2.在样式中设置一个默认的字体大小

3.写样式时ui图所量宽度为60px,rem布局中为0.6rem(也就是说 `60px = 0.6rem`)

4.最后正常布局就好啦!

rem布局封装及使用相关推荐

最新文章

热门文章

rem布局封装及使用

1.首先看封装好的js代码

2.在样式中设置一个默认的字体大小

3.写样式时ui图所量宽度为60px,rem布局中为0.6rem(也就是说 60px = 0.6rem)

4.最后正常布局就好啦!

rem布局封装及使用相关推荐

最新文章

热门文章

3.写样式时ui图所量宽度为60px,rem布局中为0.6rem(也就是说 `60px = 0.6rem`)