如何更改< div>基于设备的大小 [英] How to change <div> size based on devices

问题描述

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

I am having a website already developed using Expression Engine. Currently if i open site on mobile phone or other device few sections cut off from the screen.

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

After debugging i found that i need to change height of DIV <div id="tabmiddle" style="height:1500px;"> in respect of device. I am very new to expression engine.

我正在寻找类似

    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 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.

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

They allow you to apply specific styles based on the screen dimensions.

例如:

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

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

This will change the height of your element with tabmiddle as the ID to 1500 pixels high whenever the screen is smaller than 600 pixels; typically a mobile/tablet device.

这篇关于如何更改< div>基于设备的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！