在vue中配置rem

位置:在APP.vue的script中,在export default之外

(()=>{

  let winW = document.documentElement.clientWidth,

  desW = 1440,

  htmlFont = winW / desW * 100;

  window.htmlFont = htmlFont;

  document.documentElement.style.fontSize = htmlFont + 'px';

})()

浏览器的兼容性之Mate标签

在vue项目index.html中

是否启用WebApp全屏模式,删除苹果默认的工具栏

<mate name="apple-touch-fullscreen" content="yes" />

启用360极速模式

<mate name="renderer" content="webkit" />

针对老的手持设备优化,不识别viewport

<mate name="HandheldFriendly" content="true" />

uc强制竖屏

<mate name="screen-orientation" content="portrait" />

QQ强制竖屏

<mate name="x5-orientation" content="portrait" />

UC强制全屏

<mate name="full-screen" content="yes" />

qq强制全屏

<mate name="x5-fullscreen" content="true" />

UC应用模式

<mate name="browsermode" content="application" />

QQ应用模式

<mate name="x5-page-mode" content="app" />

windows phone 点击无高光

<mate name="msapplication-tap-highlight" content="no" />

不被显示为拨号连接

<mate name="format-detection" content="telephone=no" />

优先使用IE最新版本和chrome

<mate http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >

浏览器页面头像

<link rel="shortcut icon" href="图片路径" type="image/x-icon"/>

rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签的更多相关文章

  1. Vue 项目中 ESlint 配置

    前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...

  2. vue项目中全局配置变量

    在项目中api管理需要用到全局变量,创建全局变量的方式也有很多. 1.通过export default const BASEURL = "http://localhost:3333/&quo ...

  3. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  4. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  5. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  6. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  7. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  8. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  9. Vue项目中使用vw实现移动端适配

    我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...

随机推荐

  1. Python title()、upper()、lower()方法--string

    描述 title()方法: 将字符串中的单词“标题化”,即首字母大写,其余字母转化为小写. upper()方法:将字符串中的小写字母转化为大写字母. lower()方法:将字符串中的大写字母转化为小写 ...

  2. RedHat Enterprise Linux 6.4使用网易Centos 6 的yum源

    1.首先到http://mirrors.163.com/centos下载软件包 x86 地址:http://mirrors.163.com/centos/6/os/i386/Packages/ x86 ...

  3. Python3学习之路~8.4 利用socket实现文件传送+MD5校验

    利用socket实现文件传送,大约分为如下几步: 1.读取文件名2.检测文件是否存在3.打开文件(别忘了最后关闭文件)4.检测文件大小5.发送文件大小给客户端6.等客户端确认7.开始边读边发数据8.m ...

  4. 使用纳米 Protocol buffers 作为序列化数据

    使用纳米 Protocol buffers 作为序列化数据 Protocol Buffers 是 Google 公司开发的一种数据描述语言,类似于XML能够将结构化数据序列化. 但是它更小, 更快, ...

  5. 解析key值不确定的json数据

    遇到一个奇葩的需求,一段json的key值是动态的,并且这个key还是有作用的.这就要求在不知道key是多少的情况下去把这段json解析出来. 我用到的方法是迭代器.具体代码如下 JSONObject ...

  6. 获取地址栏url

    Url=${window.location.protocol}//${window.location.host}${window.location.pathname}

  7. 排序之选择排序(SelectSort)

    package com.sort; /* * 选择排序 * 把第一位与其他数进行比较,这样每轮比较都会出现一个最大值或最小值 * 根据需要让升序或降序排列 */ public class Select ...

  8. MySql 版本

    MySql 版本: netformwork 2.0 netformwork 4.0

  9. 论文阅读(Weilin Huang——【arXiv2016】Accurate Text Localization in Natural Image with Cascaded Convolutional Text Network)

    Weilin Huang——[arXiv2016]Accurate Text Localization in Natural Image with Cascaded Convolutional Tex ...

  10. Bioinfo online workshop

    http://icb.med.cornell.edu/index.html%3Fpage_id=2068.html 1. Datacamp https://www.datacamp.com/cours ...