使用阿里的 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. [转]:Delphi XE中泛型数组的使用范例

    Delphi XE中泛型数组的使用范例,下面的范例简单的使用了泛型字符串数组,如用 TArray 代替 array of Word, 还可以使用 TArray 类提供的算法(就是少了点). uses ...

  2. SQL Server 2016新特性:列存储索引新特性

    SQL Server 2016新特性:列存储索引新特性 行存储表可以有一个可更新的列存储索引,之前非聚集的列存储索引是只读的. 非聚集的列存储索引支持筛选条件. 在内存优化表中可以有一个列存储索引,可 ...

  3. NO.5   算法测试(词条统计)

     一.安装Eclipse 下载Eclipse,解压安装,例如安装到/usr/local,即/usr/local/eclipse 4.3.1版本下载地址:http://pan.baidu.com/s/1 ...

  4. libGDX开发环境搭建-Android Studio 最新版

    http://blog.csdn.net/renwuqiangg/article/details/53088720 —————————————————————————————————————————— ...

  5. matlab将矩阵数据归一化到[0,255]

    matlab将矩阵数据归一化到[0,255]     function OutImg = Normalize(InImg) ymax=255;ymin=0; xmax = max(max(InImg) ...

  6. Java Spring MVC 错误 及 常见问题 总结

    [参考]spring入门常见的问题及解决办法 错误: 从Git新获取项目 运行出现 1.org.springframework.beans.factory.BeanDefinitionStoreExc ...

  7. Groovy和Java互调

    Scala和Java为静态语言,Groovy为动态语言 Scala: 函数式编程,同时支持面向对象 Groovy: jvm上的脚本,较好兼容java语法,Groovy加强了Java集成. 可配置化的优 ...

  8. 【React + flask】跨域服务及访问

    Flask from flask import Flask , request from flask_cors import * import flask import json import pic ...

  9. python学习笔记(五)

    面向对象方法 元组的二义性:不明确参数代表的含义 circle=(2,4,6) def distance_from_origin(x,y): return "返回x,y坐标" de ...

  10. vue+axios如何操作数据交互

    参考: http://www.php.cn/js-tutorial-403543.html