nuxt移动端适配

根据有赞的vant官网的提示,用了两个插件

postcss-pxtoremlib-flexible

以下是有赞官网的提示
nuxt移动端适配_第1张图片

第一步:用yarn安装上面两个插件。

第二步:引用postcss-pxtorem

需要配置到nuxt.config.js的build中
nuxt移动端适配_第2张图片

第三步:把flexible.js放到static/js中,并在nuxt.config.js的head中引用。
具体做法是,从node_modules中找到amfe-flexible把index.js复制出来,重命名为flexible.js,放入static/js中
然后在head中引用

image.png

这样就大功告成了。字体和元素大小会自动根据屏幕的大小而发生变化

注意:只有元素使用rem单位,元素才会自动适应屏幕

你可能感兴趣的:(nuxt.js,移动端适配,vue.js,vant,postcss)