笔记本电脑或是台式机
互联网
Web开发、响应式设计、rem
笔者在多年的前端开发实践中经历了从最初的PC固定布局、手机端固定布局（两端留白）到响应式设计（媒体查询、百分比布局等），直到最终选择rem+Javascript的模式，但是在项目开发中需要将大量的样式由px转换为rem，单位之间的换算虽然不复杂，但是工作量却很大。
点击上图中用边框标示的部分，进入“用grunt写了一个px和rem互转的工具”页面，如下图所示：
在该文章的末尾还提供了一个在线转换工具，如下图所示，可以很方便地将px转换为rem，批量操作，几秒就能完成。
笔者将实际项目中的CSS代码拷贝进入转换，有几个参数要选择，进行转换效果如下图所示：
这里的参数选择和你在项目中的设计图尺寸和根元素字体大小相关，至于border的处理是因为在安卓下使用rem单位的支持性特别差，你可能写2rem或者3rem都没用默认会变成1px，所以在使用border属性时很多时候不建议处理border。 Javascript控制根元素大小的代码如下图所示，读者可以将代码放在公共的Js文件中，确保每个HTML文件都引用到。 在线工具中还提供了自动生成媒体查询的功能，这在响应式设计中可以少些许多CSS代码，让前端开发事半功倍。这里不做介绍，读者根据实际情况决定是否使用该功能。
其实，读者也可以自己写一个javascript函数实现上述功能，不过，重复发明轮子也没有什么意义，除了上面的工具之外（javascript实现），还有Sass的方案。网络有相关的文章，读者可以去研读，不过，还是在线工具为最佳，当然也可以将该工具下载下来使用。
本经验是综合了互联网上的多种方案，并结合了自己的开发实践，总结出来的
响应式设计（媒体查询）、rem的使用在移动端兼容性是很好的，在PC低版本浏览器上有兼容性问题