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 相关文章推荐
javascript编程起步(第三课)
Feb 27 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
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
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
jQuery动画效果图片轮播特效
2016/01/12 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
python 图片验证码代码
2008/12/07 Python
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python底层封装实现方法详解
2020/01/22 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
python简单实现插入排序实例代码
2020/12/16 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
电子商务专业个人的自我评价
2013/11/19 职场文书
软环境建设心得体会
2014/09/09 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
护理实习生带教计划
2015/01/16 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技