jsp使用rem页面内容不能根据屏幕分辨率自适应_前端基础：如何更好的使用em、rem...

em和rem都是前端开发中表示长度的单位，特别是在移动端的开发中应用最广，可能很多前端新手对这两个单位平时虽然在用，但可能不太理解，这篇文章也许正好可以帮助你更好的理解。

em，rem怎么用

rem是实现自适应布局的常用方法。

rem以根元素字体大小为基准，em以父元素字体大小为基准

对rem而言，的字体大小为14px，1rem就等于14px，2rem就等于28px。

对em而言，父元素的字体大小为14px，子元素的1em就等于14px，2em就等于28px。

设置根元素 font-size属性值的方式：

第一种方法，js动态读取屏幕宽度：

通过js读取屏幕宽度，根据宽度计算对应的尺寸并设置根元素font-size值。 一般项目以320px的屏幕为基准，设置font-size为12px。

防止设置的font-size造成页面抖动，这部分代码放在header底部加载，并内联到html文档中。

第二种方法，媒体查询：

通过CSS3媒体查询，不同的屏幕设置不同的字体大小。

html { font-size: 62.5%}@media only screen and (min-width: 481px) { html { font-size:94%!important }}@media only screen and (min-width: 561px) { html { font-size:109%!important }}@media only screen and (min-width: 641px) { html { font-size:125%!important }  body { max-width: 640px }}

项目中px转rem的计算可以借助工具完成：

• sass-rem
• webpack项目可以使用 px-to-rem-loader

这两个工具的使用大伙可以自行查阅网上文档，网上都有详细的教程，当然工具也不仅限于这两种。

小结

这篇文章比较简短，不过内容还是比较容易理解的。希望大伙能多动手去实践实践。