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

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 .

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 像素高；通常是移动/平板设备。