使用阿里的 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. Fluent动网格【13】:网格光顺总结及实例

    光顺(Smoothing)方法是最基本的网格节点更新方法.Fluent提供了三种光顺方法: Spring弹簧光顺 Diffusion扩散光顺 Linearly Elastic Solid光顺 三种方法 ...

  2. Docker指令

    将showdoc容器下的/var/www 拷贝到主机 /home/bonker/showdocTsp1.214下 docker cp showdoc:/var/www /home/bonker/sho ...

  3. h5 扫描二维码打开app和点击下载功能的实现

    window.onload = function () { jumpToapp() } var browser = { isAndroid: function () { return navigato ...

  4. vue的js文件中获取vue实例

    1.main.js导出vue实例: var vue = new Vue({ el: '#app', router, components: { App }, template: '<App/&g ...

  5. 原创:在局域网中,如何知道某个IP被占用 show arp

    如果某一栋楼有三层交换机(一般为汇聚层交换机),只需要在该三层交换机输入命令:show arp,即可知道当前那些IP地址被占用.如果该栋楼只有二层交换机(接入层交换机),需要在连接该二层交换机的上级三 ...

  6. 【iCore1S 双核心板_ARM】例程十九:SD_IAP_ARM实验——更新升级STM32

    实验现象及操作说明: 1.本例程共有两个代码包,APP和IAP,IAP程序功能实现将APP程序升级至STM32中. 2.直接上电或烧写程序将执行升级的APP应用程序. 3.按下按键上电或写程序将进行升 ...

  7. mui 浏览器一样自动缩放

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Java对象序列化全面总结

    前言 Java允许我们在内存中创建可复用的Java对象,但一般情况下,这些对象的生命周期不会比JVM的生命周期更长.但在现实应用中,可能要求在JVM停止运行之后能够保存(持久化)指定的对象,并在将来重 ...

  9. SparkStreaming+Kafka 处理实时WIFI数据

    业务背景 技术选型 Kafka Producer SparkStreaming 接收Kafka数据流 基于Receiver接收数据 直连方式读取kafka数据 Direct连接示例 使用Zookeep ...

  10. 用xstart远程连接linux图形用户界面

    转载:https://blog.csdn.net/yabingshi_tech/article/details/51839379 双击xstart 输入:/usr/bin/xterm -ls -dis ...