使用阿里的 lib-flexible 及 vue-meta 库:

https://github.com/amfe/lib-flexible/

https://github.com/nuxt/vue-meta#meta-object

1.安装lib-flexible

在命令行中输入并运行:npm i lib-flexible --save

2.在项目入口文件main.js中引入lib-flexible

import 'lib-flexible'

这个时候我们可以npm run dev看一下,已经有了效果。

使用 vue-meta

npm install vue-meta --save

然后在要使用vue-meta的组件里使用:

import VueMeta from 'vue-meta'

Vue.use(VueMeta)
export default {
data () {
return {
myTitle: '标题'
}
},
metaInfo: {
htmlAttrs: {
lang: 'zh'
},
meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
},
...
}

vue 自适应 Responsive 设计的更多相关文章

  1. 自适应网页设计(Responsive Web Design)

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  2. 自适应网页设计(Responsive Web Design)(转)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  3. (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  4. 自适应网页设计(Responsive Web Design)(转)

    作者: 阮一峰 出处:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移 ...

  5. 阮一峰:自适应网页设计(Responsive Web Design)别名(响应式web设计)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  6. 自适应网页设计(Responsive Web Design)别名(响应式web设计)转载阮一峰

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  7. [转]自适应网页设计(Responsive Web Design)

    本文转自:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 作者: 阮一峰 日期: 2012年5月 1日 随着3G的普 ...

  8. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  9. Responsive设计的十个基本技巧(转)

    什么是Responsive设计?有的同学认为Responsive设计是自适应布局,也有的同学认为Responsive是网格布局.其实这些想法都不正确.Wikipedia对Responsive做 了详细 ...

随机推荐

  1. [CI]jenkins安装&插件管理&java-helloworld之旅

    持续集成概述 没有持续集成时的情况 持续集成最佳实战 维护一个单一的代码库 使构建自动化 执行测试是构建的一部分 集成日志及历史记录 使用统一的依赖包管理库 每天至少集成一次 jenkins实现持续集 ...

  2. 深入理解JDBC的超时设置

    恰当的JDBC超时设置能够有效地减少服务失效的时间.本文将对数据库的各种超时设置及其设置方法做介绍. 真实案例:应用服务器在遭到DDos攻击后无法响应 在遭到DDos攻击后,整个服务都垮掉了.由于第四 ...

  3. css实现高度或者宽度不固定的div元素垂直左右居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. c++中为什么可以通过指针或引用实现多态,而不可以通过对象呢?

    引言:  在c++中司空见惯的事情就是:可以通过指针和引用可以实现多态,而对象不可以.  那为什么?让我们来解开这神秘的暗纱! 1. 类对象的存储方式: 在一个类的实例中,只会存放非静态的成员变量. ...

  5. Linux操作环境下配置MMIX环境

    一.概述 MMIX用途:高德纳写的<计算机程序设计艺术>,使用 MMIXAL 来编写代码,解释算法. 环境:Ubuntu 桌面版18.04. 二.操作步骤 1,创建MMIX文件夹并切入该文 ...

  6. 蜕变成蝶~Linux设备驱动之watchdog设备驱动

    看门狗(watchdog )分硬件看门狗和软件看门狗.硬件看门狗是利用一个定时器 电路,其定时输出连接到电路的复位端,程序在一定时间范围内对定时器清零 (俗称 “喂狗”),如果程序出现故障,不在定时周 ...

  7. mysql问题解决SELECT list is not in GROUP BY clause and contains nonaggregated column

    今天在Ubuntu下的部署项目,发现一些好好的列表页面发生 :Expression # of SELECT list is not in GROUP BY clause and contains no ...

  8. python 中 __init__方法

    注意1,__init__并不相当于C#中的构造函数,执行它的时候,实例已构造出来了. class A(object): def __init__(self,name): self.name=name ...

  9. modified: xxx(modified content, untracked content)

    当运行git status的时候提示如下: modified: xxx(modified content, untracked content) 我们会很本能的直接执行 add .commit .pu ...

  10. Aspose.Words使用技巧

    咨询个问题啊,我在使用aspose生成word,遇到了两个问题,一个是用aspose自动生成的目录的字体与标题的字体一致,但是用户不想他们一致,如何修改:二是,用户只想在正文部分显示页码,目录等页面不 ...