关于应用UI组件的移动端适配方式

目录
  • 问题1
  • 问题2
    • 1.安装lib-flexible
    • 2.在项目的入口引入lib-flexible
    • 3.安装postcss-px2rem-exclude
    • 4.配置postcss.config.js

在移动端开发应用UI组件也会遇到一系列需要注意的问题。

问题1

比如说，标签页是一个整体的组件，但是我们需要将标签页的标题和其他组件一起固定到顶部就要将标签页标题分离出来，这时候我们可以自己写一个样式在将标题分离

具体的代码：

// 组件
<van-sticky>
     <van-nav-bar title="列表" border></van-nav-bar>
     
     <div class="top">
         <div class="title" :class="{ active: active==0 }" @click="active=0">待审批</div>
         <div class="title" :class="{ active: active==1 }" @click="active=1">已审批</div>
     </div>
 </van-sticky>

 <to-do v-if="active==0"></to-do>
 <have-to-do v-if="active==1"></have-to-do>

//  数据
 export default {
     data() {
        return {
            active: 0,
        }
    },
}

主要原理就是使用一个数据，例如active进行标记。点击不同的标题时，修改该数据标记的值，并且不同的标题在active标识激活后改变样式，并且切换不同的面板。

问题2

同时，以vant组件为例，这类组件自身用的单位是px，但是用作移动端适配，我们应该选择rem，所以要进行一下转换。

1.安装lib-flexible

安装命令

npm install lib-flexible --save

这个插件原理就是根据屏幕宽度的变化从而自动设置html根节点下的font-size大小。

2.在项目的入口引入lib-flexible

在main.js中添加：

import ‘lib-flexible'

3.安装postcss-px2rem-exclude

安装命令

npm install postcss-px2rem-exclude --save

这个插件在打包项目的时候将px像素转换为rem像素。

4.配置postcss.config.js

Vue3.0项目下默认没有这个文件,我们可以自己手动新建一个postcss.config.js文件。并填入相应的配置内容，如下：

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem-exclude': {
    //37.5是根据Vant组件的设计稿是375得来的,lib-flexible插件默认是将375分为10等分,如果UI组件的设计稿是750,那么这里的设置就是填750/10=75
      remUnit: 37.5,
      exclude: /folder_name/i
    }
  }
}

接下来，启动项目就可以看到组件已经完成了移动端的适配。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue 在移动端体验上的优化解决方案

    详解vue 在移动端体验上的优化解决方案

    去年年底自己搭了一个vue在移动端的开发框架,感觉体验不是很好.上个星期又要做移动端的项目了.所以我花了两天时间对之前的那个开发框架做了以下优化 自定义vuex-plugins-loading 路由切换动画 + keep alive 动态管理缓存组件 better-scroll与vue的最佳实践(better-scroll的vue化) 自定义指令(vue-finger:包括点击,长按,双击,拖拽移动,多点触控,滑动,旋转,缩放手势) 移动端适配方案 如何分情况处理页面置顶 路由懒加载 自定义 v

  • 详解vue移动端项目的适配(以mint-ui为例)

    1.使用vue-cli脚手架生成项目骨架,略. 2.相关配置: rem适配: index.html加入以下代码,并在head中加入以下meta; <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWi

  • Mint UI 基于 Vue.js 移动端组件库

    Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • vue前端框架—Mint UI详解（更适用于移动端）

    一.mintUI简介 mint是一个基于vue的前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验.mint已支持vue2.0. 二.安装和引入mintUI     在安装之前首先要对vue.js有所了解,有一个建立好的vue的项目以及安装好的node.js. 执行命令npm i mint-ui -S,出现以下界面代表安装成功. 引入muitUI: 在main.js中加入 import Min

  • 关于应用UI组件的移动端适配方式

    目录 问题1 问题2 1.安装lib-flexible 2.在项目的入口引入lib-flexible 3.安装postcss-px2rem-exclude 4.配置postcss.config.js 在移动端开发应用UI组件也会遇到一系列需要注意的问题. 问题1 比如说,标签页是一个整体的组件,但是我们需要将标签页的标题和其他组件一起固定到顶部就要将标签页标题分离出来,这时候我们可以自己写一个样式在将标题分离 具体的代码: // 组件 <van-sticky>      <van-nav

  • Vue组件大全包括（UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例)

    Vue是一款比较流行的JS库,本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目 一.Vue常用UI组件 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2

  • vue做移动端适配最佳解决方案(亲测有效)

    vw 解决方案 1. 安装并配置PostCss插件 复制代码 代码如下: npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S 2. 对 PostCss 进行配置 找到在根目录中的.postcssrc.js,对PostCSS插件进行配置 module.exports = { "plugins":

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基准:750设计稿: 这是方案的基础理论,在这个基础上,我们还要搞明白,到底要干一件什么事情! 目标一.手机适配:就是页面上的尺寸,无论高度,还是宽度,还有字体,随屏幕的宽度变化!这里是屏幕宽度!是不是想到了vw,对,就是这个意思:--最大程度在各个尺寸屏幕上还原设计稿 目标二.px转换成rem:一般

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • webpack的移动端适配方案小结

    目录 rem vw 适配第三方UI框架 结语 在移动端开发的过程中,一个最常见的问题就是适配不同的屏幕宽度.目前比较常见的适配方案有rem和vw,它们都是css中的相对单位. rem W3C对rem的定义是 font-size of the root element,它是一个只相对于浏览器的根元素(HTML元素)的font-size的来确定的单位,也就是说对于不同宽度的机型,我们只需要计算出对应的根元素的字体大小,用同样的css代码可以实现等比适配.考虑最简单的情况: html代码片段 //移动

  • Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

    今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render: h =>

  • 无UI 组件Headless框架逻辑原理用法示例详解

    目录 概述 精读 总结 概述 Headless 组件即无 UI 组件,框架仅提供逻辑,UI 交给业务实现.这样带来的好处是业务有极大的 UI 自定义空间,而对框架来说,只考虑逻辑可以让自己更轻松的覆盖更多场景,满足更多开发者不同的诉求. 我们以 headlessui-tabs 为例看看它的用法,并读一读 源码. headless tabs 最简单的用法如下: import { Tab } from "@headlessui/react"; function MyTabs() { ret

  • 深入探究angular2 UI组件之primeNG用法

    前言:众所周知,primeNG是ng2的一个ui组件库,很强大,个人感觉比ng2-bootstrap还强大,下面就告诉大家怎么安装使用,官网:http://www.primefaces.org/primeng/#/ 本人使用angular cli 创建项目,所以讲述在cli下的配置安装步骤,如果没有使用cli也不用担心,官网有具体的安装步骤. 1. 安装 cd 你的项目目录 npm install primeng --save-dev 2. 配置angular-cli.json omega是一种

  • vue.js学习之UI组件开发教程

    vue.js学习之UI组件开发教程

    本文主要给大家介绍了关于vue.js之UI组件开发的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1. 新建组件: <script src="/public/javascripts/vue.js"></script> <style> #app1{background-color: red} #app2{background-color: blue} </style> <body> <div id=&quo

随机推荐