插件地址
gitee: https://gitee.com/xlou/clear-viewport.git
github: https://github.com/omlou/clear-viewport.git
npm: https://www.npmjs.com/package/clear-viewport
使用
script 標(biāo)簽引入
<script src="https://gitee.com/xlou/clear-viewport/raw/master/dist/clear-viewport.min.js"></script>
<!-- 建議下載到本地使用，放在<head>標(biāo)簽內(nèi)可以提供最優(yōu)性能 -->
<script>
cvp.init({/* options */})
</script>
在 Vue像云、React 和 Angular 項(xiàng)目中使用
安裝
npm i clear-viewport -S
在 main.js / main.ts 中使用
import {cvp} from 'clear-viewport'
/* 移動端 H5 頁面推薦的配置掺出，這里的設(shè)計(jì)稿是 750px ，如果是 375px 苫费，則不用配置 width */
cvp.init({
width:750,
fontSize:'0.14rem' // 默認(rèn) 0.16rem
})
/* PC 端頁面推薦的配置汤锨，這里的設(shè)計(jì)稿是 1920px ，可以根據(jù)設(shè)計(jì)稿調(diào)整 */
cvp.init({
width:1920,
metaViewport:false,
fontSize:'0.14rem'
})
/* 如設(shè)計(jì)稿中 div 的寬是 20px 百框，那么在代碼中就設(shè)置 0.2rem 闲礼，即設(shè)計(jì)值除以 100 */
/* 如果不想除以 100 ，可以設(shè)置 mobile:false 柬泽，但是這樣微信和QQ打開頁面時會錯亂，其它瀏覽器則沒問題 */
效果
可以根據(jù)屏幕或窗口的大小動態(tài)的調(diào)整頁面元素和字體大小嫁蛇，做到在不同窗口大小中展示效果一樣
此插件在頁面渲染完成前就完成所用的工作锨并，不會影響頁面的加載效果
原理
1rem 等于 html 根元素的字體大小 "font-size" ，默認(rèn)為 16px
動態(tài)改變 root 字體大小就能改變 rem 單位的大小
