如何基于其他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>

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

桌面视图

移动视图

您可以看到文本框对于移动视图来说太小了

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

原因是文本框的容量是容器的70％，占其父级的40％，这在桌面视图中是很好的，因为它们并排放置，但在移动视图中它们位于分开的行

所以我要找的是在移动视图中将父容器的宽度更改为可用区域的100％。

那么如何根据gantry-width-40或gantry-width-90类的css将容器类hidden-desktop更改为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%;
    }
}

做什么：当视口大于500px时，媒体查询不适用，使父div占视口宽度的50％。

然后，当您调整视口大小（或查看视口小于500px的设备）时，媒体查询会应用。使父div占据宽度的90％。

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

Answer 2

您是否考虑过使用CSS框架？我建议您使用Zurb Foundation，您正在寻找的区域是http://foundation.zurb.com/docs/components/grid.html