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做 了详细 ...
随机推荐
- 关于web项目创建后WEB-INF下面没有出现web.xml的解决方法
提供两种解决方案: 第一种:创建完项目后,需要手动创建出web.xml 第一步:选取创建的项目名称右击 第二步:eclipse的同学找到 java EE Tools 中的 下图画圈部分. MyEcl ...
- Odoo 进销存报表现已开源
根据会计区间或自定义查询时间段,对仓库的产品出入库情况进行查看: 模块地址参见内部群公告.
- C语言 · 数的划分
算法训练 数的划分 时间限制:1.0s 内存限制:256.0MB 锦囊1 使用动态规划. 锦囊2 用F[i,j,k]表示将i划分成j份,最后一份为k的方案数,则F[i,j,k]= ...
- halcon开发必读
关于HALCON的新手入门问题简答(1) 无论读入什么图像,读入图像显示效果明显和原始图像不一致,哪怕是从相机读入的图像,也是明显颜色差异.什么原因引起? 答:初步诊断是,显示的时候调用的颜色查找表存 ...
- python程序打包成.exe
安装pyinstaller 方法一:使用pip install pyinstaller 方法二:如果是下载github上的包之后手动安装 包下载 亲测可用:Pyinstaller下载地址,GitHub ...
- python 将函数参数一键转化成字典的技巧,非**kwargs,公有方法和函数抵制kwargs。
1.有时候使用设计模式,例如工厂方法模式,函数传的参数还需要一一根据条件传递到各个类里面去实例化或者其他原因,直接复制所有的参数看起来不太好,造成很多相同的行. 2.直接函数/方法中写**kwargs ...
- Kafka 2.1.0压缩算法性能测试
Apache Kafka 2.1.0正式支持ZStandard —— ZStandard是Facebook开源的压缩算法,旨在提供超高的压缩比(compression ratio),具体细节参见htt ...
- 记录一份Oracle 正确的监听配置文件listener.ora与tnsnames.ora
一.前言 昨天中午接到领导指示,有其他组的负责人B在厄瓜多尔演示他们组的产品,然后我们组的负责人就想说也在那边搭一套环境,(北美那边的亚马逊云环境),让B帮忙演示下我们的系统. 于是,开始了一个比较曲 ...
- node.js用logio实时监控log
http://logio.org/ 1.先装好node.js $ yum install nodejs 2.安装log.io $sudo npm install -g log.io --user &q ...
- Material Designer的低版本兼容实现(五)—— ActivityOptionsCompat
extends:http://www.cnblogs.com/tianzhijiexian/p/4087917.html 本文是对API中的方法做了介绍,如果想要看如何让这些方法兼容4.x或2.x可以 ...