VScode cssrem/px to rem插件使用详细教程

╰半夏微凉° 2023-06-17 15:58 18阅读 0赞

### VScode cssrem插件使用 详细教程 ###

1. 下载插件

打开扩展，搜索cssrem如图：点击安装

![format_png][]

image.png

2. 重新加载

下载安装完成重新加载一遍，使插件生效

![format_png 1][]

image.png

3. 设置根字体

点击VScode左下方图标，选中设置

![format_png 2][]

image.png

![format_png 3][]

image.png

往下滑到cssrem,三个选项随你改

![format_png 4][]

image.png

改完之后重启！！！！  
改完之后重启！！！！  
改完之后重启！！！！

![format_png 5][]

image.png

大功告成！

### 项目中rem做适配的使用 ###

!function(win,doc){
        var d=doc.documentElement;
        function change(){
            d.style.fontSize= d.clientWidth/96+'px';
        }
        win.addEventListener('resize',change,false);
        change();
    }(window,document);

# **px to rem同理** #

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81ODA5MjAwLTkzMjYzMzdkMzYyNDllOTgucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzUzL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81ODA5MjAwLTM3OGRiOGRjZjEyMjE4NDQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzE0L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81ODA5MjAwLTEyYzAzMTAzMTEwMzk2MTQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzA4L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81ODA5MjAwLTAzMTFkYmIzNzJiOTNlODUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTExMS9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81ODA5MjAwLTk1ODc5MWFmZTQ5M2EyYWIucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81ODA5MjAwLWNlZDc5ODg2MTJlZGY0NDEucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTU5L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png