使用阿里的 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. Hadoop相关基础知识

    因为个人对这块的知识也不熟悉,所以大多内容来源于网络. 1.      Hadoop项目框架 2.      Hadoop Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用户可以 ...

  2. C++ 函数模板的返回类型如何确定?

    函数模板 #include <iostream> // 多个参数的函数木板 template<typename T1, typename T2> T2 max(T1 a, T2 ...

  3. hdoj:2056

    #include <iostream> #include <iomanip> #include <cstdlib> using namespace std; str ...

  4. 01Spark的TopN问题

    和hadoop的目的一样,给你数据,然后取TopN.数据如下: 取出数据在排名前十的数据. 代码如下: package com.test.book; import java.util.ArrayLis ...

  5. 在java.util中有EventListener接口:所有事件监听者都要实现这个接口。

    在java.util中有EventListener接口:所有事件监听者都要实现这个接口. java.util中有EventObject类:所有的事件都为其子类.   事件范例在\CoreJava\Gi ...

  6. Web重温系列(二):SQLite+EF6实现本地化存储

    本来我们的产品有着复杂的层次结构,作为客户端的C# WinForm是不操作数据库的.但是最近有个需求,需要将数据本地保存.可选的方案很多,比如文本文件或者XML序列化和反序列化,或者如access.d ...

  7. ubuntu更改镜像源

    参考 https://blog.csdn.net/weixin_41762173/article/details/79480832 建议使用ustc.edu的源,其他例如清华的,阿里的连sublime ...

  8. css定位实现星级展示没有交互

    <div class="star_evaluate"> <span class="star star_10"></span> ...

  9. 安装jdk配置环境变量JAVA_HOME不起作用

    今天重新安装系统,需要装jdk,配置环境变量,于是先配置JAVA_HOME  D:\Program Files\Java\jdk1.8.0_144, 然后在配置path路径,但是cmd到dos命令行输 ...

  10. 【物联网】国内几大云计算厂商的物联网IOT解决方案-阿里云、腾讯、百度、华为、青云(转)

    一.前言随着万物互联时代的来临,IOT逐渐成为各大云计算厂商重点发力的方向,作为平台厂商,提供的是包含接入.存储.管理.计算.展示等多个方面的综合能力,我这里就根据它们各自的特点和能力,简单介绍下它们 ...