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

Question

我有一个已经使用 Expression Engine 开发的网站。目前，如果我在移动设备 phone 或其他设备上打开网站，屏幕上会切断一些部分。

调试后，我发现我需要更改 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。

Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.

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

例如：

@media (max-width: 600px) {
  #tabmiddle {
    height: 1500px;
  }
}

当屏幕小于 600 像素时，这会将以 tabmiddle 作为 ID 的元素的高度更改为 1500 像素高；通常是 mobile/tablet 设备。

Answer 2

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

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

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

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

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

如果设备宽度大于或等于 992px，它将遵循您在 tabmiddle 元素的 style 标签中写入的默认 CSS 高度。

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

How to change <div> size based on devices

html

css

expressionengine