ionic2屏幕适配实现适配手机、平板等设备的示例代码


Posted in Javascript onAugust 11, 2017

本文介绍了ionic2屏幕适配实现适配手机、平板等设备的示例代码,分享给大家,具体如下:

推荐使用的编辑器是:VS code  (Visual Studio Code)=>只负责编辑文档,不编译。

而WebStorm 有检查编译等,在ionic1开发的时候,还很方便用浏览器随时点击按键浏览效果,但是开发ionic2之后,ionic2有自动检查编译,会照成webstorm卡顿,无法编辑。

一、首先增加一个一面作为测试

我使用的工程是sidemenu

在项目目录下执行如下命令: ionic g page page4

二、运行 命令打开浏览器调试

Ionic serve

三、修改page4.html文件的内容如下:

<ion-header > 
 <ion-navbar > 
  <button ion-button menuToggle> 
   <ion-icon name="menu"></ion-icon> 
  </button> 
  <ion-title>title</ion-title> 
 </ion-navbar> 
</ion-header> 
 
 
<ion-content style="background-color: #abaaaa;"> 
  <ion-grid style="height: 100%; display: flex; padding: 0px;"> 
    <ion-row style="background-color: #abaaaa; flex: 2;">  
     <ion-col style="flex: 1; padding: 10px 10px 5px 10px; " > 
      <ion-card style="height: 100%; width: 100%; margin: 0px; background-color: #cdcecf"> 
        <ion-card-content style="height: calc(100% - 30px);"> 
         card content 
        </ion-card-content> 
      </ion-card> 
     </ion-col> 
    </ion-row> 
    <ion-row style="background-color: #abaaaa; flex: 4;">  
     <ion-col style="flex: 1; padding: 5px 10px 10px 10px; " > 
      <ion-card style="height: 100%; width: 100%; margin: 0px; background-color: #434343"> 
 
        <ion-card-content style="height: calc(100% - 30px);"> 
         content 
        </ion-card-content> 
       </ion-card> 
      </ion-col> 
    </ion-row> 
  </ion-grid> 
</ion-content>

其实这里参考的地方是,<ion-content></ion-content>内的部分,这个代码演示了ionic2怎样实现动态自使用布局

四、测试效果:

用鼠标拉动浏览器边框调整页面大小,会发展ionic的页面元素也会跟着动态大小变形。当这个软件编译到了平台安装包。比如编译了Android,那么页面会自适应android的屏幕。实现了对不同屏幕大小的设备适配。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JSON对象转化为字符串详解
Aug 11 #Javascript
JS中Swiper的使用和轮播图效果
Aug 11 #Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 #Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 #Javascript
js 奇葩技巧之隐藏代码
Aug 11 #Javascript
echart简介_动力节点Java学院整理
Aug 11 #Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 #Javascript
You might like
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
高效使用Python字典的清单
2018/04/04 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
计划生育宣传标语
2014/06/21 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
加班费申请报告
2015/05/15 职场文书
个人向公司借款协议书
2016/03/19 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
Nginx利用Logrotate实现日志分割
2022/05/20 Servers
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL