使用阿里的 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. easyUI的汇总列,在前端生成

    1.easyUI初始化,启用汇总列,showFooter:true 2.后台json有默认的footer的值 {"total":28,"rows":[ {&qu ...

  2. 猿题库从 Objective-C 到 Swift 的迁移

    猿题库从 Objective-C 到 Swift 的迁移 引言 相信没有人会怀疑,Swift 是 iOS 开发未来的主流语言,但是由于 Swift 语言的不断变化以及庞大的迁移成本,真正把项目迁移到 ...

  3. ABR与ASBR区别

    ABR 区域边界路由器 area border router 位于一个或多个OSPF区域边界上.将这些区域连接到主干网络的路由器.ABR被认为同时是OSPF主干和相连区域的成员.因此,它们同时维护着描 ...

  4. NPS - 数字化营销 - 净推荐值

    在获客成本高涨的时代,拥有一批超级用户,让企业更有本钱专注在提升产品及体验,创造更多的超级用户,形成良性循环.超级用户究竟要如何创造?超级用户可以定义成“忠诚用户当中最忠诚的一群人”,因此创造超级用户 ...

  5. WebSphere MQ中的CCSID

    CCSID是一个字符集的标识.作为unicode标准通过定义一个字符集内每个字符要对应那个数字值的方式定义了一个字符集.这说明CCSID就是一个定义字符集顺序的标识数码罢了.IBM的字符标识架构在文档 ...

  6. ajax跨域,这应该是最全的解决方案了

    前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见 ...

  7. Java开发中的23种设计模式

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  8. iOS开发之--单个页面禁止右滑返回操作

    禁止右滑: if ([self.navigationController respondsToSelector:@selector(interactivePopGestureRecognizer)]) ...

  9. passwd命令

    passwd命令用于设置用户的认证信息,包括用户密码.密码过期时间等.系统管理者则能用它管理系统用户的密码.只有管理者可以指定用户名称,一般用户只能变更自己的密码. 语法 passwd(选项)(参数) ...

  10. sendmail邮件自动发送

    配置邮件自动发送: 1.安装软件 yum -y install sendmail mailx 2.发送邮件的邮箱授权 eg:y******@126.com 网页网易云邮箱登陆 --> 设置 -- ...