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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
input框中的name和id的区别
Nov 16 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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
用 PHP5 轻松解析 XML
2006/12/04 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
javascript操作数组详解
2014/12/17 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
Python中特殊函数集锦
2015/07/27 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
利用python画出折线图
2018/07/26 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
董事长岗位职责
2013/11/30 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
运动会邀请函范文
2014/01/31 职场文书
教师职位说明书
2014/07/29 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
2014年转正工作总结
2014/11/08 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
色戒观后感
2015/06/12 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android