【问题标题】:Javascript function resize window height and widthJavascript函数调整窗口高度和宽度
【发布时间】:2016-07-08 13:10:42
【问题描述】:

我有一个总高度为 1440 像素的引导网格,它混合了图像和文本面板。文本给了我真正的问题,媒体查询无法解决这个问题。我想创建一个函数,将整个 div 的大小调整为一半高度和一半宽度,使其看起来像响应式的。例如内容缩小。有什么想法吗?

<script>
    $(function () {
        var $gridRow = $('.grid-row');
        $(window).resize(function () {
            $gridRow.height($gridRow.width() / 2);
        });
    })
</script>

【问题讨论】:

  • 添加了..我太累了..
  • 如果元素保持原始宽度和高度,则该行将不考虑调整大小。尝试为所有行 DOM 层次结构(图像、div 等)设置调整大小。

标签: javascript jquery html css twitter-bootstrap


【解决方案1】:

试试这个(我做了没有引导的例子)

https://jsfiddle.net/dkzmgbee/

var $gridRow = $('.example');

function resizeHeight () {
  var cw = $gridRow.width() / 2;
  $gridRow.css({'height':cw+'px'});
}  

$(window).resize(resizeHeight);
resizeHeight();

【讨论】:

    【解决方案2】:

    不确定我的问题是否正确。但与其进入媒体查询地狱尝试,

    flowtype.js https://github.com/simplefocus/FlowType.JS?files=1

    ...如果它只是文本没有调整到第 n 度的情况,并且您依赖于使用 javascript 的用户。

    还有一些其他的库做类似的事情,(或者如果你必须自己做的话)

    注意不要使这个问题过于复杂...我不完全了解您的问题,但它是否比您想象的更简单?这是css问题还是javascript需要处理的问题? (我只问你提到你累了)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-05-21
      • 1970-01-01
      • 2012-06-19
      • 1970-01-01
      相关资源
      最近更新 更多