手机端 pc端 屏幕自适应

一、新建 vue.config.js项目目录中没有 vue.config.js 文件，需要手动创建,在根目录中创建 vue.config.js

const pxtorem = require('postcss-pxtorem')

module.exports = {

    css: {

        loaderOptions: {

            postcss: {

                plugins: [

                    pxtorem({

                        rootValue: 37.5,

                        propList: ['*'],

                        // 该项仅在使用 Circle 组件时需要

                        // 原因参见 https://github.com/youzan/vant/issues/1948

                        selectorBlackList: ['van-circle__layer']

                    })

                ]

            }

        }

    }

}

二、安装lib-flexible

npm install amfe-flexible -s

三、main.js引入

import 'amfe-flexible'　　

四、index.html要设置meta

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <title>Project Management System</title>

  </head>

  <body>

    <div id="app">

    </div>

    <!-- built files will be auto injected -->

  </body>

</html>

　

五、关于

关于使用

为了要使用vant的样式，rootValue应设置为37.5

设计图是750px宽的，则写的时候如果用px 则需要除以2，如果用rem的话，要自行计算 px/75=rem，或者使用IDE的插件计算

　

atzhang

vant vue 屏幕自适应的更多相关文章

  1. vue-cli 项目里屏幕自适应

    很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!在移动端网页开发中,我们可以用手机淘宝的flexible．那么在vue当中,也同样可以用!接下来就介绍下如何在vue-cli配置的项目 ...

  2. vue-cli脚手架里如何配置屏幕自适应

    很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!在移动端网页开发中,我们可以用手机淘宝的flexible．那么在vue当中,也同样可以用!接下来就介绍下如何在vue-cli配置的项目 ...

  3. [Unity3D]NGUI用Sprite动画和屏幕自适应做游戏开始场景

    我们在玩任何一款手游产品时,都是先上来个logo界面,游戏欢迎界面等,这就意味着我们要做一款游戏需要多个场景,场景之间来回切换实现游戏逻辑,unity也不例外,所以从本篇开始将会介绍如何搭建多个场景, ...

  4. 4种必须知道的Android屏幕自适应解决方案

    文章来源:http://blog.csdn.net/shimiso/article/details/19166167 demo下载:http://www.eoeandroid.com/forum.ph ...

  5. NGUI屏幕自适应

    NGUI确实是非常棒的一个做界面的插件,比起U3D自带的GUI要好很多,当然也有一些不好之处,毕竟什么都不可能那么完美. 最近在用Unity写游戏使用NGUI遇到了一个很多人都在遇到的问题,就是关于屏 ...

  6. 【Cocos2d-x 3.x】屏幕自适应匹配

    在进行游戏开发时, 由于市场上的Android移动设备的分辨率有很多种,而且IOS移动设备的分辨率也不相同,为了能让手游能在90%以上的移动设备较为完美的运行,因此需要考虑屏幕的自适应问题,让一套资源 ...

  7. .Net语言 APP开发平台——Smobiler学习日志：开发APP时，如何快速地实现屏幕自适应

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.属性介绍 设置控件在客户端屏幕可见并超出客户端屏幕时,是否自动调节高度以适应屏幕高 ...

  8. 【Unity3D插件】NGUI屏幕自适应（转）

    屏幕自适应 NGUI可以比较方便的实现屏幕自适应,但是它的官方教程里面针对这个问题没有详细的教程,所以可能在实现的时候会走比较多的弯路.以下是我在开发过程中找到的一个比较方便的实现方法. 主要组件 1 ...

  9. 【NGUI】屏幕自适应（不用UIStretch，用UIRoot）---------------good

    原地址:http://blog.csdn.net/lzhq1982/article/details/18814023 这篇文章是转载的,之前用UIStretch做屏幕自适应,但一直有两个硬伤让我难受, ...

随机推荐

  1. 痞子衡嵌入式：超级下载算法(RT-UFL)开发笔记番外（1） - JLinkScript妙用

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是超级下载算法开发笔记番外篇之JLinkScript妙用. JLinkScript 文件是配套 J-Link 调试器使用的脚本,这个脚本适 ...

  2. 【Linux进阶】使用grep、find、sed以及awk进行文本操作

    目录 一.元字符 二.grep命令 1. 过滤出包含某字符串的行 2. 过滤出以某字符串开头(结尾)的行 3. 过滤出包含某字符串及其相邻的行 4. 过滤出不包含某关键字的行 5. 过滤出包含多个字符 ...

  3. 【题解】coin HDU2884 多重背包

    题目 Coins Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  4. 解决java socket在传输汉字时出现截断导致乱码的问题

    解决java socket在传输汉字时出现截断导致乱码的问题 当使用socket进行TCP数据传输时,传输的字符串会编码成字节数组,当采用utf8编码时,数字与字母长度为1个字节,而汉字一般为3个字节 ...

  5. WPF中选择文件和选择文件夹的方法

    最近从winform转WPF,遇到了各种各样的问题.然而网上的关于WPF的资料少之又少,甚至连基本的文件选择操作,百度搜索的首页都没有一个比较好的方法.所以,踩了几个坑之后,我把我得到的方法分享给大家 ...

  6. DOS命令行（2）——Windows磁盘维护与管理

    预备知识 1 -- 磁盘 1.磁盘分区 主磁盘分区.扩展磁盘分区.逻辑分区 主磁盘分区是物理磁盘的一部分,它像物理上独立的磁盘那样工作.对于基本启动记录(MBR)的磁盘,在一个基本磁盘上最多可以创建四 ...

  7. 技术解密 ｜阿里云多媒体 AI 团队拿下 CVPR2021 5 冠 1 亚成绩的技术分享

    6 月 19-25 日,备受全球瞩目的国际顶级视觉会议 CVPR2021(Computer Vision and Pattern Recognition,即国际机器视觉与模式识别)在线上举行,但依然人 ...

  8. Linux 常用命令 随口说

    ls cd pwd du disk usage -h -s. 文件大小 df disk free -h 磁盘占用 fdisk mount top/htop + ps + grep + wc + pki ...

  9. Java基础-封装和继承

    @ 目录 Java基础知识(封装和继承) 一. 封装 1.1 封装的目的 1.2 封装的好处 1.3 封装的步骤 1.4 封装的例子 1.5 小结 二. 继承 2.1 继承的介绍 2.2 生活中的继承 ...

  10. 详解 CDN 加速

    背景 本来是为了深入了解 CDN 的,结果发现前置知识:IP.域名.DNS 都还不算特别熟,所以先写了他们 现在终于来聊一聊 CDN 啦 本文素材均出自:https://www.bilibili.co ...