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做 了详细 ...
随机推荐
- AICODER官方小程序和公众号上线了
小伙伴们,新年好. 在新的一年里,AICODER将继续为大家提供优质的视频资源,为大家提供一个优质的问题解答平台,并且开始提供优质的职业提升类的优质培训资源. 感谢各位一直以来的支持和关注.请加一下A ...
- 【iCore4 双核心板_ARM】例程三十二:UART_IAP_ARM实验——更新升级STM32
实验现象及操作说明: 1.本例程共有两个代码包,APP和IAP,IAP程序功能实现将APP程序升级至STM32中. 2.直接上电或烧写程序将执行升级的APP应用程序. BIN升级文件产生方法: 1.编 ...
- 在BootStrap的modal中使用Select2
bootstrap 3 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; bootstrap4 $.fn.modal.C ...
- sfc /scannow命令如何能用虚拟光驱完成修复?(xp下的办法)
我们先光盘文件或用WinRAR压缩软件将ISO文件解压缩到本地磁盘某目录下,如e:\winxp: 在ISO文件上右击,在弹出的菜单中选择“解压到”: 文件较多,久等一会解压完成后文件夹下有很多 ...
- node踩坑之This is probably not a problem with npm. There is likely additional logging output above.错误
可能由于种种版本更新的原因需要执行 npm install重新安装一次,如果还是不可以的话,在把之前装的都清空 rm -rf node_modulesrm package-lock.jsonnpm c ...
- swoole Tcp服务器
基础代码 <?php //创建Server对象,监听 127.0.0.1:9501端口 $serv = ); //监听连接进入事件 $serv->on('connect', functio ...
- 【Dubbo 源码解析】06_Dubbo 服务调用
Dubbo 服务调用 根据上图,可以看出,服务调用过程为: Consumer 端的 Proxy 调用 Cluster 层选择集群中的某一个 Invoker(负载均衡) Invoker 最终会调用 Pr ...
- gitlab-ci + k8s 之gitlab-ci(一)
目前常用的持续集成工具主要是jenkins与gitlab-ci ,我已在另一博文中详细记录了jenkins部署过程(其中包括gitlab的搭建),此篇介绍gitlab-ci的使用. 背景介绍 GitL ...
- Piggy-Bank 完全背包
来源hdu1114 Problem Description Before ACM can do anything, a budget must be prepared and the necessar ...
- Druid连接池(一)
介绍 Druid首先是一个数据库连接池,但它不仅仅是一个数据库连接池,它还包含一个ProxyDriver,一系列内置的JDBC组件库,一个SQL Parser. 支持的数据库 Druid支持所有JDB ...