下载 安装 ：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. 对比python学julia（第一章）--（第六节）数字黑洞

    6.1. 问题描述 6174数字黑洞是印度数学家卡普雷卡尔于1949年发现的,又称为卡普雷卡尔黑洞,其规则描述如下. 任意取一个4位的整数(4个数字不能完全相同),把4个数字由大到小排列成一个大的数, ...

  2. 【Java】ElasticSearch 在项目里的应用

    一.前言: 好久没写笔记了,最近忙一个项目,用到ES查询,以往的笔记写ES都是搭建环境,用Kibana玩一玩 这次是直接调用API操作了,话不多说,进入主题 二.环境前提: 公司用的还是纯Elasti ...

  3. 【Centos6】时间同步问题

    解决方案参考: https://www.cnblogs.com/webnote/p/5751758.html centos6并不会主动同步时间 上一次关机,将时间停留了 使用硬件时间同步校准 [roo ...

  4. 【WSDL】WebService描述语言的实践

    问题的产生: 上班写了一个改接口的需求,其中涉及了一个WSDL这么一个概念 WSDL是个啥???? 翻了翻项目,里面就是个文件,以wsdl为后缀名 内容结构和XML相似,或者直接说是XML文件也可以 ...

  5. 《A Palestinian Woman Embraces the Body of Her Niece》—— 4月19日报道 2024年世界新闻摄影大赛结果在荷兰出炉，一张巴勒斯坦妇女在加沙地带抱着被杀害的五岁侄女尸体的照片被评为年度最佳作品

    The genocide is not just a matter between the parties involved; it's a concern for all humanity. Gen ...

  6. anaconda环境下：强化学习PPO算法仿真环境库sample-factory的python完美适配版本为python3.11

    anaconda环境下:强化学习PPO算法仿真环境库sample-factory的python完美适配版本为python3.11 库sample-factory地址: https://github.c ...

  7. Ubuntu、windows10双系统删除Ubuntu后如何清除grub启动

    参考文章: 删除Grub,windows引导修复-百度经验 (baidu.com) ============================================== 自己的笔记本电脑一直都 ...

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

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

  9. 当 Spring 循环依赖碰上 Aysnc，调试过程中出现 BeanCurrentlyInCreationException，有点意思

    开心一刻 前两天有个女生加我,我同意了 第一天,她和我聊文学,聊理想,聊篮球,聊小猫小狗 第二天,她和我说要看我腹肌 吓我一跳,我反手就删除拉黑,我特喵一肚子的肥肉,哪来的腹肌! 循环依赖 关于 Sp ...

  10. WIN32下的模拟时钟

    #include <Windows.h> #include <math.h> #include <tchar.h> #include "resource. ...