rem自适配

rem是基于根元素进行设置的，也就是html的fontSize

比如默认的一般浏览器fontsize是16px那么1rem=16px;

为编写方便一般是构建scss进行编写css文件，下面说下sass的构建

首先安装ruby,安装成功在命令行运行gem install sass,进行sass安装

这俩安装成功后，配置编辑器，我这里是webstrom编辑器，主要是配置监听scss文件，以及自动生成css文件

webstorm >file>settings>tools>filewatchers

这样一步一步点下来，在filewatchers右侧“+”号里选择scss,在弹出框里主要配置program，arguments,output path,

program:找到ruby安装路径，选择scss.bat文件

arguments：--no-cache
--update
--sourcemap
--watch
$FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

output path：$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

配置完成就可以进行scss代码自动转换css了

配置sass是为了方便编写scss,方便与rem，下面说下使用rem的问题

自适配的为题就是根据设备显示的屏幕宽度进行内容适显示，而rem是有根元素的fontsize决定，自适应时，屏幕尺寸在改变

所以，我们也要根据屏幕的改变，根据屏幕宽度动态设置fontsize的值，

获取屏幕的宽度， let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth

设置fontsize :  document.getElementsByTagName("html")[0].style.fontSize=htmlWidth/10+"px";

项目要动态 获取fontSize值，添加resize事件

<script>

        document.addEventListener("resize",(e)=>{

            

            htmlWidth=document.documentElement.clientWidth || document.body.clientWidth

              document.getElementsByTagName("html")[0].style.fontSize=htmlWidth/10+"px";

}

简洁的就说这些，具体scss编写要看看文档