提问的问题3

提问的问题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里内容的书写代码是什么意思?需要学会吗?还是以后直接拿过来用就好?

老师详细说下

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,对于你的问题解答如下:

  1. 你截图的方式同样也是可行的, 引入reset.css,再安装自动转换的插件也是可以的

  2. 750只是一个系数,可以自定义的修改。因为实际开发中,一般ui人员的设计稿都是以iphon6为标准,所以一般使用750作为一个标准。

  3. 安装px2rem插件是为了将你CSS中写的px转换成rem, remUnit 的意思是 1rem=多少像素,与html的字体大小无关。 例如:options:{remUnit:50};意思就是1rem = 50px。 remUnit值是自定义的,可以任意设置值

  4. rem.js文件是动态设置html的font-size值。

  5. 元素实际占据页面的大小, 是根据转换后的rem值和font-size计算的。示例:占据页面大小 = ( px / remUnit )*fontSize值。

    配置的remUnit值为50

    http://img1.sycdn.imooc.com//climg/5df0b9ff09e840de06260181.jpg

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

    http://img1.sycdn.imooc.com//climg/5df0ba31095baf5904770449.jpg

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

    http://img1.sycdn.imooc.com//climg/5df0ba72097d61d702390113.jpg

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

    http://img1.sycdn.imooc.com//climg/5df0baed098213af19120877.jpg

如果帮助到了你,欢迎采纳,祝学习愉快~

  • 看不穿繁华 提问者 #1
    那我明白了,谢谢老师的解答
    2019-12-11 18:24:01
提问者 看不穿繁华 2019-12-11 15:41:47

http://img1.sycdn.imooc.com//climg/5df09d9b0916bc9617170631.jpg

其他项目中,老师是用这种方式来引入书写的

好帮手慕慕子 2019-12-11 14:04:27

同学你好,对于你的问题解答如下:

  1. rem是相对单位,相对于根元素(即html元素)font-size来计算的。比如,html的font-sise是100px;那么1rem就是100px。

    同学也可以回顾一下课程:https://class.imooc.com/lesson/1004#mid=25214 加深理解

  2. 不清楚同学以前听的视频具体是指哪里的课程呢,所以无法准确的分析同学说的这个视频中的使用方式。

    不过编程是很灵活的, 一种效果有多种实现方式,可能同学以前听的视频与目前老师讲解的方式不同,但是都可以实现px的转换。

    例如:有如下两种方式都可以实现px转换rem

    (1)如果编辑器中使用了px转换rem的插件, 可以直接在写代码的时候将px转成rem,这样就不需要在使用px2rem插件了

    (2)如果是使用当前视频讲解的px2rem插件,在css中直接写成px就可以,插件会自动将px转成rem

  3. 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中代码,我们以后可以直接拿来使用

如果帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 看不穿繁华 #1
    之前那个项目,老师的做法是,在assets文件夹下去引入reset.css文件,其中在reset.css文件中有一条是给html设置了50px或者100px,然后最后在项目中哪块用到了px的单位需要转成rem的,再去自行换算,截图是在提问的回答里 我想问的是,他这种方法是否也同样可行呢?还有就是如果按照他的做法,引入reset.css文件的方法,再去输入指令安装自动转换的插件是否也同样管用?
    2019-12-11 15:41:01
  • 提问者 看不穿繁华 #2
    还有就是:rem.js中的750是哪里来的呀,html的字体大小不是在安装完自动转换的插件后进行配置过了吗?在var px2remloader的变量中options:{remUnit:50}配置过了呀?
    2019-12-11 15:48:36
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师