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

我有一个已经使用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;">
}

最佳答案

调查media queries。


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


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

例如：

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

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