CSS / HTML:仅当屏幕大小<时,才将换行符添加到HTML。 xxx像素?

时间:2014-01-04 00:28:17

标签: html css

所以我设计了一个看起来像这样的页面:

enter image description here

它是响应式的,但是当我缩小窗口大小时,它看起来像这样:

enter image description here

我想修改间距,因为我想在按钮和下面的图片之间插入一行或两行。但是,如果屏幕尺寸小于等级,我只想要这些换行符。 767像素。做这个的最好方式是什么?感谢。

4 个答案:

答案 0 :(得分:5)

在这种情况下,我同意其他人的观点,保证金是一个更好的解决方案。但是,对于需要新行的情况(在我的情况下,我需要在狭窄的屏幕上将特定位置包装一个长URL),您可以插入这样的虚拟中断:

HTML:

ALongLineOfUnbrokenText<span class="narrow"></span>ThatNeedsToBeBroken

CSS:

@media (max-width: 400px) {
  .narrow {
    display: block
  }
}

希望其他人会觉得这很有用。

答案 1 :(得分:0)

您可能想要进入css并编辑响应式布局的值。 (编辑:基于您的问题,我假设您已经拥有了响应式布局的CSS )在CSS中,当屏幕大小&lt; 767像素添加:

margin-bottom: 20px;

调整值以匹配您想要的值。

如果您真的想要添加换行符,那么您可能需要为包含display = "block"的{​​{1}}元素实现某种类型的JavaScript,或者计算屏幕大小并尝试追加{{ 1}}使用<br />或类似的东西。这将是凌乱。我建议只是尝试添加到CSS。

答案 2 :(得分:0)

你可以实现这个宽度简单的jQuery:

$(function(){
    if( parseFloat($(window).width()) < 767 ){
        $('.container').css('margin-bottom','50px');
    }
});

只需将.container替换为您为这些元素提供的任何标识符。

答案 3 :(得分:0)

如果出于某种原因,您不想像其他人所建议的那样使用保证金。您可以使用媒体查询隐藏特定屏幕尺寸以上的<br>元素:

@media(min-width: 767px){
     br{
        display:none;
     }
}