html - 如何根据其他 css 类动态更改 html 表单元素的 css 类

Question

我要- 响应式表单，针对桌面和移动设备具有不同的布局

我有

• html 表单
• 很少有来自基于龙门架的模板的响应式 CSS 类
  • gantry-width-## : 根据当前容器定义宽度
  • rt-floatleft:顾名思义
  • hidden-desktop : 隐藏桌面元素
  • visible-desktop : 隐藏非桌面元素

示例 html

<form>
    <div class="gantry-width-40 rt-floatleft">
        <input class="gantry-width-70" type="text">
    </div>
    <div class="clear hidden-desktop"></div>
    <br class="hidden-desktop" />
    <div class="gantry-width-40 rt-floatleft">
        <input class="gantry-width-70" type="text">
    </div>
    <div class="clear"></div>
    <br />
    <textarea class="gantry-width-70"></textarea>
</form>

这里有一些屏幕可以给你一个想法

桌面 View

移动 View

如您所见，文本框对于移动 View 来说太小了

请注意，屏幕被裁剪以隐藏右侧的空白区域

原因是文本框的大小是容器的 70%，是父容器的 40%，这在桌面 View 中并排放置时很好，但在移动 View 中它们位于单独的行中

所以我正在寻找的是将父容器的宽度更改为移动 View 中可用区域的 100%。

那么如何根据 hidden-desktop 的 css 将容器的类即 gantry-width-40 更改为 gantry-width-90 或 visible-desktop 类？

我更喜欢纯 css 解决方案，也欢迎其他解决方案。

Answer 1

为什么要使用不同的类？您可以使用媒体查询。

我做了这个小例子:

<div id="parent">
    <div>text</div>
</div>

#parent {
    width: 50%;
    background: lightblue;
    padding: 5%;
}
#parent div {
    padding: 5%;
    background: lightgreen;
}
@media all and (max-width: 500px) {
    #parent {
        width: 90%;
    }
}

作用是什么:当视口(viewport)大于 500 像素时，媒体查询不适用，使父 div 成为视口(viewport)宽度的 50%。

然后，当您调整视口(viewport)大小时(或使用视口(viewport)小于 500 像素的设备查看)，媒体查询就会应用。使父 div 占据 90% 的宽度。

我为你创建了一个 JSFiddle，check here .调整结果窗口的大小，看看会发生什么。