Question

我正在开发一种在表单中创建HTML框的Web服务。生成其中一个的服务器端（Django）模板如下所示：

 <select name="typelist" size="{{ select_rows }}">
    {% for t in types %}
    <option>{{ t }}</option>
    {% endfor %}
 </select>

我正在使用Zurb Foundation来帮助我使页面响应屏幕大小。我希望在小屏幕上显示时减少显示的<select>框行数。

我可以通过更改size属性的值来更改显示的行数，但这无助于使表单显示响应屏幕大小。

使用Foundation时，是否有一种简单的方法可以根据小/大屏幕尺寸设置size属性值（或任何属性）？

Answer 1

基金会没有直接促进这一点。就此而言，您无法仅使用CSS媒体查询更改size属性的值。

您最有可能的是JavaScript解决方案。 enquire.js等库允许您以编程方式对屏幕大小的变化作出反应，如果您想要响应地修改DOM，则需要执行此操作。

修改

实际上，基金会5介绍了a utility for Media Queries，它也可能适合你。

Answer 2

在安德烈的回应的指导下，我想出了办法。我很感激有待改进的评论。

在<select>框中添加了一些其他类：

<select name="typelist" size="{{ select_rows }}" class="small-size-4 medium-size-8">
    {% for t in types %}
    <option>{{ t }}</option>
    {% endfor %}
 </select>

添加一些使用内置Foundation媒体查询的Javascript：

/*
 * Adjust size attribute on elements with small-size-x, medium-size-x, etc class. 
 */
$(window).resize(Foundation.lib_methods.throttle(function(){
    if (window.matchMedia(Foundation.media_queries['small']).matches){
        $(".small-size-4").attr("size", 4);
    };
    if (window.matchMedia(Foundation.media_queries['medium']).matches){
        $(".medium-size-8").attr("size", 8);
    };
}, 30, true));

这是针对我的特定要求的最小解决方案，但我可以想象它可以推广到处理更广泛的选项。

这适用于Foundation 5.0.3。最新版本使用Foundation.utils.throttle - 这似乎已在2014-02-20更新：请参阅https://github.com/zurb/foundation/commit/ee5b3330b5908a787f5c1f22cdb2c630c3e14668。最新版本还包括5.0.3中不存在的debounce函数，我认为这可以避免响应更改的延迟，并允许使用更长的时间间隔而不会影响交互质量。

有没有办法使用zurb-foundation </select>根据屏幕大小调整<select> @size属性

2 个答案: