Vue移动端适配,vue兼容移动端

　　最近接触了一个项目。vue如何适应不同屏幕上不同的屏幕尺寸？本文将详细介绍，有兴趣的可以了解一下。

　　根据最近的一个医疗手机项目，vue如何适应不同屏幕上的不同屏幕尺寸？

1、适配方案

　　我在这个项目中使用的vue移动方案是amfe-flexible和postcss-pxtorem的结合。

　　首先介绍amfe-flexible。

　　Amfe-flexible是一个可扩展的布局方案，主要是将1rem设置为viewWidth/10。

　　然后就是这个库postcss-pxtorem。

　　Postcss-pxtorem是Postcss的一个插件，用来从像素单位生成rem单位。

2、如何使用和配置？

　　1.安装amfe-flexible和postcss-pxtorem。

　　npm安装amfe-灵活-保存

　　npm安装postcss-pxtorem - save

　　2.安装完成后，必须引入才能使用。

　　需要在main.js中引入才能使用。

　　导入“amfe-flexible”；

　　这样介绍就可以了

　　3.然后就是postcss-pxtorem配置步骤。

　　配置postcss-pxtorem，可以在vue.config.js、postcssrc.js、postcsrc . config . js其中一个中配置，权重从左到右递减。如果没有，创建一个新文件，只需设置其中一个：

　　为了方便起见，我在vue.config.js中配置的代码配置如下：

　　模块.导出={

　　//.其他配置

　　css: {

　　loaderOptions: {

　　postcss: {

　　插件：[

　　require(postcss-pxtorem)({

　　根值：37.5，

　　属性列表：[*]

　　})

　　]

　　}

　　}

　　},

　　}

　　在postcssrc.js或postcss.config.js as中对其进行如下配置：

　　模块.导出={

　　插件:{

　　postcss-pxtorem :

　　根值：37.5，

　　属性列表：[*]

　　}

　　}

　　}

　　注意：

　　1.rootValue按照设计稿宽度除以10设置，假设设计稿为375，即rootValue设置为37.5；

　　2.propList是设置需要转换的属性。这里*转换一切。

　　通过以上配置，我们可以在项目中使用它。

　　例如，在项目中，我们这样写：登录表单{

　　宽度：90%；

　　位置：绝对；

　　top:50%；

　　左：50%；

　　transform: translate(-50%，-50%)；

　　背景色：# fff

　　填充：20px

　　框大小：边框-框；

　　边框半径：10px。标题{

　　位置：绝对；

　　top:-50px；

　　字体大小：24px

　　颜色：# fff

　　左：0；

　　右：0；

　　文本对齐：居中；

　　}

　　}

　　我们代码的输出如下。插件可以帮助我们自动转换单位。

　　登录包装器。登录表单{

　　宽度：90%；

　　位置：绝对；

　　top:50%；

　　左：50%；

　　transform: translate(-50%，-50%)；

　　背景色：# fff

　　填充： 53333rem//注意这是换算后的单位。

　　框大小：边框-框；

　　边框半径： 26667雷姆；//注意这是换算后的单位。

　　}

　　关于vue移动端完美适配方案的这篇文章到此为止。更多关于vue移动端完美适配方案的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。