ion-menu 根据屏幕的宽度进行显示或者隐藏

作者: 小杰的简书 | 来源:发表于2018-04-08 15:49 被阅读0次

做项目做到了电视版本，需要实现由侧边栏的效果。需求为窄屏不出现侧边栏宽屏出现侧边栏。

解决如下：

在app.html中添加一个标签 ion-split-pane,注意 ion-nav标签里有一个main，如果没有它，会导致页面无法占满屏幕、

<ion-split-pane when="(min-width:475px)" [when]="isEnableSplitSpane()">

<ion-menu [content]="content" >

</ion-menu >

<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"> </ion-nav>

</ion-split-pane>

ion-menu 根据屏幕的宽度进行显示或者隐藏
做项目做到了电视版本，需要实现由侧边栏的效果。需求为窄屏不出现侧边栏宽屏出现侧边栏。解决如下：在app.h...
小程序样式总结
1、关于rpx rpx:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为...
iOS WKWebview字体自动放大的问题
问题描述：wkwebview加载内容时，默认自动适配屏幕宽度，也可以根据后台设置的内容宽度调节显示方式，方法如下，...
微信原生小程序rpx和生命周期
rpx rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 ...
小程序tab切换
页面切换内容可根据current进行显示隐藏
px与rpx换算
rpx是微信小程序中css的尺寸单位，可以根据屏幕宽度进行自适配。规定屏幕宽度为750px，譬如iphone6，...
rpx与px的换算
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPho...
RPX
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPho...
微信小程序 wxss样式
1. 尺寸单位 rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx...
移动端font-size适配
屏幕宽度机制是：对于不同宽度的屏幕，我们用js取到屏幕的宽度，然后根据这个宽度同比缩放font-size，由于我...

网友评论

本文标题：ion-menu 根据屏幕的宽度进行显示或者隐藏

本文链接：https://www.haomeiwen.com/subject/opxmhftx.html

ion-menu 根据屏幕的宽度进行显示或者隐藏