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做 了详细 ...
随机推荐
- [CI]jenkins安装&插件管理&java-helloworld之旅
持续集成概述 没有持续集成时的情况 持续集成最佳实战 维护一个单一的代码库 使构建自动化 执行测试是构建的一部分 集成日志及历史记录 使用统一的依赖包管理库 每天至少集成一次 jenkins实现持续集 ...
- 深入理解JDBC的超时设置
恰当的JDBC超时设置能够有效地减少服务失效的时间.本文将对数据库的各种超时设置及其设置方法做介绍. 真实案例:应用服务器在遭到DDos攻击后无法响应 在遭到DDos攻击后,整个服务都垮掉了.由于第四 ...
- css实现高度或者宽度不固定的div元素垂直左右居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- c++中为什么可以通过指针或引用实现多态,而不可以通过对象呢?
引言: 在c++中司空见惯的事情就是:可以通过指针和引用可以实现多态,而对象不可以. 那为什么?让我们来解开这神秘的暗纱! 1. 类对象的存储方式: 在一个类的实例中,只会存放非静态的成员变量. ...
- Linux操作环境下配置MMIX环境
一.概述 MMIX用途:高德纳写的<计算机程序设计艺术>,使用 MMIXAL 来编写代码,解释算法. 环境:Ubuntu 桌面版18.04. 二.操作步骤 1,创建MMIX文件夹并切入该文 ...
- 蜕变成蝶~Linux设备驱动之watchdog设备驱动
看门狗(watchdog )分硬件看门狗和软件看门狗.硬件看门狗是利用一个定时器 电路,其定时输出连接到电路的复位端,程序在一定时间范围内对定时器清零 (俗称 “喂狗”),如果程序出现故障,不在定时周 ...
- mysql问题解决SELECT list is not in GROUP BY clause and contains nonaggregated column
今天在Ubuntu下的部署项目,发现一些好好的列表页面发生 :Expression # of SELECT list is not in GROUP BY clause and contains no ...
- python 中 __init__方法
注意1,__init__并不相当于C#中的构造函数,执行它的时候,实例已构造出来了. class A(object): def __init__(self,name): self.name=name ...
- modified: xxx(modified content, untracked content)
当运行git status的时候提示如下: modified: xxx(modified content, untracked content) 我们会很本能的直接执行 add .commit .pu ...
- Aspose.Words使用技巧
咨询个问题啊,我在使用aspose生成word,遇到了两个问题,一个是用aspose自动生成的目录的字体与标题的字体一致,但是用户不想他们一致,如何修改:二是,用户只想在正文部分显示页码,目录等页面不 ...