Ionic 4如何使用媒体查询来制作响应式应用?

问题描述 投票:0回答:2

我正在使用Ionic 4创建混合应用程序。

我需要使用CSS媒体查询来根据移动设备的屏幕尺寸进行特定的布局。示例:

[这在浏览器中360x640屏幕尺寸像素的视口中的外观如何:

enter image description here

但是,这在我的具有相同屏幕尺寸(360x640)像素的手机中的外观:

enter image description here

所有蓝色部分都从屏幕上切除。

这里是CSS:

@media screen and (max-height: 640px) {


.ultraipunt{   
    font-size:19px;
}

.tittle{
  font-size: 23px;
}

.tittle3{
  font-size: 19px;
}

.buttonclass{
    font-size:19px;
    height:60px;
}

.buttonfacebook{
    font-size:19px;
    height:60px;
}

.buttongoogle{
    font-size:19px;
    height:60px;
}

.fond1{
   min-height: 154px;
}

.fond2{
   padding-top:0.5em;
  padding-bottom:0.5em;
  margin-top:0px;
}
.textwhite {
    font-size:18px;
}
.textwhitebold {
    font-size:18px;
}

form{
    margin-bottom:0em;
    margin-top:0em;
}

.imgen1{
 width:65px;
}


}

使用网站:https://www.mydevice.io/,这是我的手机规格:

enter image description here

现在我的问题是:

为什么CSS尺寸无法很好地反映我的手机视口?如何使用ionic 4进行混合应用的响应式设计?

css ionic4 responsive hybrid-mobile-app
2个回答
0
投票

您必须在Ionic中使用离子响应网格进行响应设计:https://ionicframework.com/docs/layout/grid

默认情况下,网格将占用100%的宽度。要基于屏幕尺寸设置特定宽度,请添加固定属性。每个断点的网格宽度在--ion-grid-width- {breakpoint}

中定义

0
投票

在mydevice.io中,您可以看到screen.width和screen.height。 您不得使用该属性来计算可用的视口分辨率,因为它将始终返回整个屏幕分辨率(实际上是360px x 640px),而不是视口分辨率(通常会降低高度,有时会降低宽度)移动设备,具体取决于显示模式,是否显示状态栏以及是否显示按钮栏)。

代替 screen.width和screen.height 使用为您的应用提供实际可用视口的几种选择之一:例如window.innerWidth和window.innerHeight

您可能在window.innerHeight中得到的像素少于640像素。

关于来自CSS的媒体查询,它将使用视口分辨率,但是您指定了max-height:640px,并且由于您的视口高度小于640px,因此即使高度小于640mm,规则也会匹配,即使您希望其他东西。

因此,只要您的实际身高小于640像素,就必须添加其他/更多高度更低的css规则,或者可以使用另一种方法(底部锚定或更复杂的场景JS,基于innerHeight / innerTop帮助动态响应属性)。

PS有点偏离主题,但非常重要:总是,如果您自己使用css响应,请尝试仔细检查是否存在一个至少具有width = device-width的元视口,否则移动html渲染器可能会做奇怪的事情。

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

PS2,我想您要使用自己的样式表,否则可能已经有大量的离子材料。

© www.soinside.com 2019 - 2024. All rights reserved.