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

Question

我有一个已经使用Expression Engine开发的网站。目前，如果我在手机或其他设备上打开网站，则屏幕上的几个部分将被切断。

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

我正在寻找类似的东西

    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

调查媒体查询。

媒体查询是CSS的一个模块，它定义了表达式，使表达式可以针对特定范围的输出设备进行定制，而无需更改内容本身。

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

例如：

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

每当屏幕小于像素时，这将使用tabmiddleID将元素的高度更改为1500像素高600；通常是移动/平板电脑设备。