提问的问题3
不明白这个rem是怎么引入的,rem与px的换算是什么?
最重要的是:原来在做vue移动端项目时,设计到的rem单位时,都是去在assets文件夹中存放着reset.css文件,因为在这个文件中有html根元素的字体大小的设定
而这个老师讲解的并不是这样的:
他是在src目录下建立了一个config文件,并在里面config.js中规定了rem的算法,并在main.js中引入此文件,同时安装了一个插件,通过npm install px2rem-loader指令来帮我们自动转换了了px到rem
以前听过的那个视频是直接在assets中引入reset.css文件,然后根据倍数,手动换算成rem,想问的是,这种做法是否再通过安装上述插件指令后,会有效呢?帮我们自动转成rem呢?
我不明白的是一个人讲一个样,还是说这两种方法均可以使用?还是分场景呢?
另外,对于老师视频中rem.js里内容的书写代码是什么意思?需要学会吗?还是以后直接拿过来用就好?
老师详细说下
正在回答
同学你好,对于你的问题解答如下:
你截图的方式同样也是可行的, 引入reset.css,再安装自动转换的插件也是可以的
750只是一个系数,可以自定义的修改。因为实际开发中,一般ui人员的设计稿都是以iphon6为标准,所以一般使用750作为一个标准。
安装px2rem插件是为了将你CSS中写的px转换成rem, remUnit 的意思是 1rem=多少像素,与html的字体大小无关。 例如:options:{remUnit:50};意思就是1rem = 50px。 remUnit值是自定义的,可以任意设置值
rem.js文件是动态设置html的font-size值。
元素实际占据页面的大小, 是根据转换后的rem值和font-size计算的。示例:占据页面大小 = ( px / remUnit )*fontSize值。
配置的remUnit值为50

设置元素的宽高为100px*100px

转换后的rem值为100/ 50 =2rem

占据页面的实际大小为 (100/50) * 80 = 160

如果帮助到了你,欢迎采纳,祝学习愉快~
同学你好,对于你的问题解答如下:
rem是相对单位,相对于根元素(即html元素)font-size来计算的。比如,html的font-sise是100px;那么1rem就是100px。
同学也可以回顾一下课程:https://class.imooc.com/lesson/1004#mid=25214 加深理解
不清楚同学以前听的视频具体是指哪里的课程呢,所以无法准确的分析同学说的这个视频中的使用方式。
不过编程是很灵活的, 一种效果有多种实现方式,可能同学以前听的视频与目前老师讲解的方式不同,但是都可以实现px的转换。
例如:有如下两种方式都可以实现px转换rem
(1)如果编辑器中使用了px转换rem的插件, 可以直接在写代码的时候将px转成rem,这样就不需要在使用px2rem插件了
(2)如果是使用当前视频讲解的px2rem插件,在css中直接写成px就可以,插件会自动将px转成rem
rem.js中代码是设置html根标签的字体大小,根据视口宽度的大小进行计算,当视口宽度改变的时候,字体大小跟着改变。可以参考下面注释:
// 立即执行函数
(function() {
// 定义a方法
function a() {
// 获取视口宽度
var b = document.documentElement.clientWidth;
// 判断视口宽度是是否大于750,如果大于750,那么b的值为750,否则为获取到的值
b = b > 750 ? 750 : b
// 计算字体大小,视口宽度/750*100
var c = b / 750 * 100;
// 设置html字体大小
document.getElementsByTagName("html")[0].style.fontSize = c + "px"
}
// 默认调用a方法
a();
//视口宽度改变的时候调用a方法
window.onresize = a;
})();4. 对于rem.js中代码,我们以后可以直接拿来使用
如果帮助到了你,欢迎采纳,祝学习愉快~
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程





恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星