vue 自适应 Responsive 设计
使用阿里的 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 设计的更多相关文章
- 自适应网页设计(Responsive Web Design)
引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...
- 自适应网页设计(Responsive Web Design)(转)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- 自适应网页设计(Responsive Web Design)(转)
作者: 阮一峰 出处:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移 ...
- 阮一峰:自适应网页设计(Responsive Web Design)别名(响应式web设计)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- 自适应网页设计(Responsive Web Design)别名(响应式web设计)转载阮一峰
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- [转]自适应网页设计(Responsive Web Design)
本文转自:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 作者: 阮一峰 日期: 2012年5月 1日 随着3G的普 ...
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- Responsive设计的十个基本技巧(转)
什么是Responsive设计?有的同学认为Responsive设计是自适应布局,也有的同学认为Responsive是网格布局.其实这些想法都不正确.Wikipedia对Responsive做 了详细 ...
随机推荐
- Mybatis(二) 全局配置文件详解
这节来说说全局配置文件的东西,非常简单.看一遍就懂了. --WH 一.全部配置内容 SqlMapConfig.xml的配置内容和顺序如下,顺序不能乱.现在来对这些属性的意思一一进行讲解. 二.prop ...
- Mysql Binlog三种格式详细介绍
一.MySQL Binlog格式介绍 mysql binlog日志有三种格式,分别为Statement,MiXED,以及ROW! 查看binlog的格式的脚本: 二.binlog 的不同模式有什么区别 ...
- ELK & ElasticSearch 5.1 基础概念及配置文件详解【转】
转自:https://blog.csdn.net/zxf_668899/article/details/54582849 配置文件 基本概念 接近实时NRT 集群cluster 索引index 文档d ...
- keras 设置GPU使用率
import tensorflow as tffrom keras.backend.tensorflow_backend import set_session config = tf.ConfigP ...
- C语言 · 数字黑洞
算法提高 数字黑洞 时间限制:1.0s 内存限制:256.0MB 问题描述 任意一个四位数,只要它们各个位上的数字是不全相同的,就有这样的规律: 1)将组成该四位数的四个数字由大到小 ...
- [转]解决Error: That port is already in use.
ubuntu系统下,运行一个django项目,即输入python manage.py runserver后,可能出现 Error: That port is already in use.的错误. 即 ...
- GPRS模块在Linux平台上ppp拨号上网总结与心得
linux平台的ppp拨号上网,(注明:这里只谈命令行拨号,用linux就要习惯和熟练使用命令行) 在网上常见的有三种方式:1.使用智能的ppp拨号软件wvdial:参考案例:本博客的<使用wv ...
- PHP5.5+ APC 安装
因php 语言特性(短链接), 没法实现共享内存来提升性能. apc的出现给出了一个解决方案 .不过很可惜5.5+以后PHP官方已经废弃掉这个扩展. 幸好出现了 apcu扩展提供后续功能 api 也没 ...
- 开学收好这 17 种工具 App,让你新学期学习更有效率
开学啦!不管是想勾搭学长还是想讨好学妹,相信同学们对新学期.新同学或者新学校都已经满怀期待了.但是,除了帅气逼人的学长和青春靓丽的学妹,你们可不能忘记上学的首要任务还是学习噢. 那么,为了帮助同学们更 ...
- MonoDevelop ctrl + ' 不能定位正确的unity文档
Just Do This I had the same problem in MonoDevalop, but the url in it cannot be changed. So I tried ...