cssrem转换插件

了解cssrem和rem的动态计算首先，css3指定了1remhtml的根节点的fontsize，rem是rootem的简称。转换某些px单位与rem的关系如果css中没有设置html的fontsize，默认浏览器会将其转换为1rem16px，彻底理解css中的单位px和em。

响应式网页设计:rem和em设置网页的字体大小。rem是指rootelement (html)的字体大小。可喜的是，他们已经从IE6远约到了Chrome，根元素默认字体大小为16px。这样的新单元兼容性如何？IE9 ，主流版本的Firefox，Chrome，Safari，Opera都支持，所以我可以自由使用rem。

于是rem的出现拯救了不会做算术的人，我再也不用担心父元素的fontsize了，因为它始终是基于根元素(html)的。比如默认的htmlfontsize16px，那么我想把12px的文本设置为:12÷160.75(rem)。当然可以引入CSS预处理工具(Sass，LESS，Stylus等。)来自动计算rem值，这里就不举例了。

如果我们想用非标准屏幕做大屏幕:如果我们想基于react实现一个大屏幕的项目，我们采用rem框架。让我们看看如何配置我们的。第一步，安装react的脚手架:第二步，将webpack抛出nodemodel。第三步，安装一些必要的依赖包。我安装了moment，echarts，echartsforreact，lodash，less，lessloader。如果有任何错误，这个地方是为antdesign配置的。不配置可能会报错，但是因为我后来的大屏方案和antdesign不兼容，所以没有用antdesign，但是这个配置还是保留了下来。

rem的单位是相对于根节点的字体大小而言的，所以可以通过设置根节点的字体大小来动态改变rem的大小。REM方案的原理其实就是把每个不同的屏幕分成相同数量的副本，让同一个元素在不同的屏幕上占据相同比例的空间。1rem等于这个页面的html的fontsize，rem可以理解为每个副本是多少px。比如设计稿宽375px，页面分成10份，那么1 rem就是37.5px，如果有一个宽37.5 px的div，就换算成rem为1rem。

如果css中没有设置html的fontsize，默认浏览器会将其转换为1rem16px。Rem是相对于根元素而言的，也就是说我们只需要在根元素中确定一个参考值，参考值可以根据自己的需要来设置。我们知道浏览器的默认字体大小是16px。我们再来看一些px单位和rem的转换关系。为了便于计算，将元素中的fontsize值设置为62.5%通常相当于将。这时，上面例子中显示的值就会发生变化:rem是css3中的一个属性，在很多浏览器中都得到了很好的支持。

1，概念px:绝对单位，页面以精确像素显示。Em:相对单位。参考点是父节点的字体大小。如果fontsize是自己定义的(浏览器默认字体为16px)，那么整个页面中的1em就不是一个固定值。Rem:相对单位，可以理解为“rootem”，相对于根节点html的字体大小计算。CSS3新增了一个属性，chrome/firefox/IE9 都支持。

能不能把代码发成文字便于分析？简单判断:字体的高度必须大于DIV的高度。虽然你的身高预设为100%，也就是父母的1rem，但是你并没有考虑上下余量的问题。这是浏览器的默认高度，具体大小因浏览器而异。比如IE默认的上下限是8PX，加起来是16px。简单来说，字体号大，设置小一点肯定好，或者可以尝试在样式头里加上* { Padding:0} is，试试，去掉上下默认填充，如果不够好，还得重新调整小字号。

首先，css3指定了1remhtml的根节点的fontsize，rem是rootem的简称。为了方便计算，1rem100px的核心思想是通常设置根节点fontsize100px:百分比布局可以实现响应式布局，rem相当于百分比布局。实现手段:动态获取当前视口的宽度，除以固定数n，得到rem的值。表达式为rem width/n *(window . devicepixelrratio | | 1)。

用这种方法，rem的大小总是等于n的宽度。因为ui设计草稿是指定的分辨率，需要按比例缩放才能在其他分辨率下使用相同的大小，所以js需要动态计算rem，Width/n将屏幕分成ui设计草稿的n个相等部分。当设备宽度不是ui设计稿宽度时，页面等份保持不变，显示页面百分比缩放，比如分辨率为1920*768的ui设计稿，有一个200*200px的盒子，那么css文件中的盒子样式就是2*2rem。