Question

我正在使用Expression Engine开发一个网站。目前，如果我在手机或其他设备上打开网站，很少有部分会从屏幕上切断。

调试后我发现我需要更改设备的DIV <div id="tabmiddle" style="height:1500px;">的高度。我是表达引擎的新手。

我正在寻找像

这样的东西

    if (Mobile Device)
{
 <div id="tabmiddle" style="height:2000px;">

}else if(Tab Device)
{
<div id="tabmiddle" style="height:1800px;">

}else
{
<div id="tabmiddle" style="height:1500px;">
}

Answer 1

查看media queries。

媒体查询是CSS的一个模块，它定义了表达式，允许在不改变内容本身的情况下为特定范围的输出设备定制演示文稿。

它们允许您根据屏幕尺寸应用特定样式。

例如：

tabmiddle

每当屏幕小于1500像素时，这会将600元素的高度更改为if (/^lang-[a-z]/.test(lang)) {像素高的ID;通常是移动/平板电脑设备。

Answer 2

您可以使用以下两种媒体规则来执行此操作：

对于移动设备（宽度<768px）：

@media (max-width: 768px){
  #tabmiddle{
    height: 2000px;
  }
}

对于Tab设备（宽度<992px）：

@media (max-width: 992px){
  #tabmiddle{
    height: 1800px;
  }
}

如果设备宽度为992px或更高，则它将遵循您在 tabmiddle 元素的style标记中写入的默认CSS高度。

如何根据设备更改<div>大小

2 个答案: