rem 适配方案

rem + 媒体查询 + less技术的rem实际开发适配方案

设计稿常见尺寸宽度： 320px、360px、375px、384px、400px、414px、500px、720px
现在基本以750为准

动态设置html标签font-size的大小：

计算rem的公式

• html字体大小 = 750 / 要分的份数（如15）
• 页面元素的大小 = 它本来在750像素下的px值 / html的字体大小

flexible.js + rem的适配方案

预备工作：下载flexible.js ，在vscode中安装一个叫 cssrem 的插件用于运算转化，这样就比用less方便多了

flexible的相关知识

flexible布局注意细节

• 注意是分成10份
• 要限定 max-width ，因为flexible 是按照屏幕宽度来分成10等份的
• 当屏幕超过750的时候设置根字体是75px，但是仅是这样还是无法实现让页面不再随着屏幕变宽而继续变宽，因为flexable.js的权重比它高，要提权，例如：
• 

cssrem 插件的相关知识

注意： 安装好插件后要记得根据（设计稿宽度 / 10 ）得到的值去对应修改 vscode 中的html字体大小基准值，这样当我们每次在 css 中打出 px 的时候都会自动帮我们转换成对应字体大小的 rem 基准值

修改方法：在 vscode 的设置中搜索 cssroot 就可以修改html的字体大小的基准值了