pc react切换成rem布局(自动适应宽度变化)
2018-12-10 15:58:11
此方案适用于 pc-react模板。
1、启用代码，这个viewportWidth = 设计稿的宽度乘以10, 在根目录下的：postcss.config.js
2、引用flexible
{{> partials/meta-flexible}}
3、修改flexible
window.__META_FLEXIBLE__ = {
// 使用方案 2, REM
plans: [2],
// Rem响应最大上限, 当宽度达到750px后不再放大
remUpperResizeLimit: 1920,
isMobile:function () {
return true;
}
};
<script src="//zhcdn01.xoyo.com/xassets/lib/meta-flexible/0.0.5/meta-flexible.min.js"></script>
<script>
window.__META_FLEXIBLE__ = {
// 使用方案 2, REM
plans: [2],
// Rem响应最大上限, 当宽度达到750px后不再放大
remUpperResizeLimit: 9999,
isMobile: function () {
return true;
}
};
</script>
<script src="//zhcdn01.xoyo.com/xassets/lib/meta-flexible/0.0.5/meta-flexible.min.js"></script>
4、如果想设置最大值和最小值: 也就是超过多少宽度就不再放大，或者小于多少值就不再缩小.
那么可以使用媒体查询，在相应的宽度下：把body的font-size定死某个值，然后加个important