下载 安装 ：npm i -S amfe-flexible

gw：GitHub - amfe/lib-flexible: 可伸缩布局方案

下载 2 个第三方包即可实现移动端适配

amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。

1. 安装包

2. 引入包

postcss插件的使用：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage

amfe-flexible 包设置rem的基本值 vue 移动端适配方案的更多相关文章

  1. 基于Vue/React项目的移动端适配方案

    本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...

  2. rem移动端适配方案

    一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...

  3. 移动端适配方案 flexible.js

    前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...

  4. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  5. 移动端适配方案-rem(基础篇)

    常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...

  6. 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...

  7. 关于Vue 移动端适配 （px2rem 插件将px转为rem）

    一.安装 npm install px2rem-loader lib-flexible --save 二.入口文件main.js加上 import 'lib-flexible/flexible.js' ...

  8. 移动端适配方案以及rem和px之间的转换

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  9. 手淘的移动端适配方案flexible

    基于 vue-cli 配置手淘的 lib-flexible + rem,实现移动端自适应 安装 flexible npm install lib-flexible --save 引入 flexible ...

  10. 移动端适配方案（rem+flex）

    为什么用rem不用px? 主流:各大网站的移动版绝大多数都是用的rem.   移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334.而现在市面上大多数手机,都达到了1080* ...

随机推荐

  1. 【SpringBoot】05 探索配置方式 Part1 指定和导入配置的注解

    @PropertySource & @ImportResource @ConfigurationProperties默认从全局配置文件中读取 我们可以拆解出来分成单独的配置文件 [提取Bean ...

  2. python运行报警告：Cython directive 'language_level' not set, using '3str' for now (Py3)

    相关: https://stackoverflow.com/questions/34603628/how-to-specify-python-3-source-in-cythons-setup-py ...

  3. 安装wsl的必备操作——开启CPU虚拟化——WslRegisterDistribution failed with error_ 0x8007019e 0x800701b 0x80370102 请启用虚拟机平台

    参考: https://www.cnblogs.com/smdtxz/p/16837946.html https://www.cnblogs.com/wenonly/p/17206040.html h ...

  4. Apache DolphinScheduler：深入了解大数据调度工具

    一.海豚调度介绍 Apache DolphinScheduler 是一个分布式易扩展的可视化DAG工作流任务调度开源系统.适用于企业级场景,提供了一个可视化操作任务.工作流和全生命周期数据处理过程的解 ...

  5. CF1697C

    C. awoo's Favorite Problem 首先,检查两个字符串中所有字母的计数是否相同. 然后考虑下面的重述.字符串s中的字母 b是静止的.而字母a和c则在字符串中移动.第一种移动是将字母 ...

  6. k8s pvc扩容

    #查看是否支持扩容 $ kubectl get sc ** -o yaml ··· allowVolumeExpansion: true #拥有该字段表示允许动态扩容 ··· #找到需要扩容的pvc ...

  7. 什么？！90%的ThreadLocal都在滥用或错用！

    最近在看一个系统代码时,发现系统里面在使用到了 ThreadLocal,乍一看,好像很高级的样子.我再仔细一看,这个场景并不会存在线程安全问题,完全只是在一个方法中传参使用的啊!(震惊) 难道是我水平 ...

  8. 初三奥赛模拟测试1--T1回文

    初三奥赛模拟测试1--\(T1\)回文 HZOI 题意 给定一个 \(n \times m\) 的,由字符组成的矩阵 \(A\) , 问你由 \(( 1 , 1 )\) 开始,点 \(( i , j ...

  9. 安装部署harbor

    配置文件中修改内容hostname 和 证书 私钥 需要指定到文件 hostname: hub.rainsc.com # http related config http: # port for ht ...

  10. 深度解析HarmonyOS SDK实况窗服务源码，Get不同场景下的多种模板

    HarmonyOS SDK实况窗服务(Live View Kit)作为一个实时呈现应用服务信息变化的小窗口,遍布于设备的各个使用界面,它的魅力在于将复杂的应用场景信息简洁提炼并实时刷新,在不影响当前其 ...