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做 了详细 ...
随机推荐
- Fluent动网格【13】:网格光顺总结及实例
光顺(Smoothing)方法是最基本的网格节点更新方法.Fluent提供了三种光顺方法: Spring弹簧光顺 Diffusion扩散光顺 Linearly Elastic Solid光顺 三种方法 ...
- Docker指令
将showdoc容器下的/var/www 拷贝到主机 /home/bonker/showdocTsp1.214下 docker cp showdoc:/var/www /home/bonker/sho ...
- h5 扫描二维码打开app和点击下载功能的实现
window.onload = function () { jumpToapp() } var browser = { isAndroid: function () { return navigato ...
- vue的js文件中获取vue实例
1.main.js导出vue实例: var vue = new Vue({ el: '#app', router, components: { App }, template: '<App/&g ...
- 原创:在局域网中,如何知道某个IP被占用 show arp
如果某一栋楼有三层交换机(一般为汇聚层交换机),只需要在该三层交换机输入命令:show arp,即可知道当前那些IP地址被占用.如果该栋楼只有二层交换机(接入层交换机),需要在连接该二层交换机的上级三 ...
- 【iCore1S 双核心板_ARM】例程十九:SD_IAP_ARM实验——更新升级STM32
实验现象及操作说明: 1.本例程共有两个代码包,APP和IAP,IAP程序功能实现将APP程序升级至STM32中. 2.直接上电或烧写程序将执行升级的APP应用程序. 3.按下按键上电或写程序将进行升 ...
- mui 浏览器一样自动缩放
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java对象序列化全面总结
前言 Java允许我们在内存中创建可复用的Java对象,但一般情况下,这些对象的生命周期不会比JVM的生命周期更长.但在现实应用中,可能要求在JVM停止运行之后能够保存(持久化)指定的对象,并在将来重 ...
- SparkStreaming+Kafka 处理实时WIFI数据
业务背景 技术选型 Kafka Producer SparkStreaming 接收Kafka数据流 基于Receiver接收数据 直连方式读取kafka数据 Direct连接示例 使用Zookeep ...
- 用xstart远程连接linux图形用户界面
转载:https://blog.csdn.net/yabingshi_tech/article/details/51839379 双击xstart 输入:/usr/bin/xterm -ls -dis ...