Question

我创建了this fiddle，因为你可以看到我有一个带有两个文本的网页，一个在另一个下面。它在宽屏幕上运行良好，但是当我缩小网页 - 或者在移动设备上运行网页时 - 它就搞砸了，就像在这个屏幕截图上一样：

我考虑通过添加CSS移动查询来提高响应速度，但后来在我的代码中：

@media (max-width: 545px) {


.outer{
  width:100%;
  height:330px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:320px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:330px;
  margin-bottom:0px;

}
}

@media (max-width: 435px) {

.outer{
  width:100%;
  height:380px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:370px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:380px;
  margin-bottom:0px;

}

}

@media (max-width: 378px) {

 .outer{
  width:100%;
  height:460px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:450px;
  margin-bottom:0px;

}
.inner2{
  width:100%;
  height:460px;
  margin-bottom:0px;

}

}

等，因此不同屏幕宽度的价值很多。我怀疑还有其他一些方法可以做到这一点，这是我不需要在移动CSS中分别覆盖每个屏幕宽度的最敏感的方式...... 你可以给我任何提示我怎样才能更改我的代码，以便它可以在任何设备/屏幕宽度上独立工作？谢谢！

Answer 1

为每个类设置最小宽度和高度，以便页面停止调整屏幕分辨率太小的文本。添加最小高度：123px;最小宽度：456px; （根据需要调整px），使它们不会在小屏幕上重叠。

注意：这对移动设备来说并不是很好。

Answer 2

在你的小提琴中你设置每个div的高度（inner1和inner2），当你将页面宽度压缩到大约150px（你的图片）时，div会溢出。至少根据我的经验，设置元素的高度并不常见。在移动平台上，宽度通常更受关注。

在每个div的css中设置overflow属性为我解决了问题。

＆＃13;

.inner1{
  width:100%;
  height:270px;
  margin-bottom:0px;
overflow: auto;
}
.inner2{
  width:100%;
  height:280px;
  margin-bottom:0px;
  overflow: auto;
}

＆＃13;

以下是overflow属性的参考。使用auto至少允许滚动并且不会切断文本。 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Bootstrap实际上有一个网格系统，其目的是使宽度值响应屏幕大小。 http://v4-alpha.getbootstrap.com/layout/grid/

此外，设置手机的视口宽度会将css加载到手机的实际屏幕宽度，而不是屏幕的像素密度宽度：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 3

您遇到的问题是由于.inner1的内容变得太高而出现在.inner2中。 .inner1因溢出而变得过高。它会显示您的文本甚至超过您指定的高度。要停止此行为，请

.inner1{
overflow:hidden;  
}

也就是说，我不建议使用您一直使用的方法使内容显示/消失（具有固定的高度）。我个人会在这种情况下使用display：none并删除display：none by code（和可能的动画）。但这超出了提出的问题，所以我不会讨论这个问题。

JSFiddle

HTML（带引导程序）

<div class= "container">
                <div class="row">
                    <div class="col-sm-7 company">
                        <h2>this is my title</h2>
                        <div class="companyDescription" >
                            <div class="outer">
                                <div class="inner1" id="inner1">
                                <h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
                                    </h5><h5>Some kind of subtitle</h5>
                                    <h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
                                </div>
                                <div class="inner2">
                                    <h5><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
                                    <h5>As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
                                    </h5>
                                    <h5>the last subtitle.</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                    </div>

<强> CSS

  .company {
  padding-top: 160px;
  color: #000;
}

.companyDescription {
  margin: 20px 0 10px 0;
  overflow:hidden;
}

.outer{
  width:100%;
  height:280px;
  top:0;
  position:relative;
}

.inner1{
  width:100%;
  height:270px;
  margin-bottom:0px;
  overflow:hidden;/*ONLY ONE NEW CSS LINE!*/
}
.inner2{
  width:100%;
  height:280px;
  margin-bottom:0px;
}

Javascript（使用jQuery）

$('#readMore').click(function(){
    $('.companyDescription').animate({
        scrollTop:$('#inner1').outerHeight()+30
    }, 1000);
})
$('#readLess').click(function(){
    $('.companyDescription').animate({
        scrollTop:0
    }, 1000);
})

Answer 4

这是我的代码，你也可以通过以下链接 -

JSFiddle

HTML代码 -

<div class="col-md-12">
  <div class="row">
    <div class="col-md-12 company">
      <h2>this is my title</h2>
      <div class="companyDescription">
        <div class="outer">
          <div class="inner1" id="inner1">
            <h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
                                        </h5>
            <h5>Some kind of subtitle</h5>
            <h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
          </div>
          <div class="inner2">
            <h5 style="display:none;"><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
            <h5 style="display:none;">As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
                                        </h5>
            <h5 style="display:none;">the last subtitle.</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JAVASCRIPT代码 -

$('#readMore').click(function() {
    $('#readMore').css('display','none');
  $('.inner2').find('h5').css('display','block');
})
$('#readLess').click(function() {
$('#readMore').css('display','block');
  $('.inner2').find('h5').css('display','none');
})

Answer 5

Bootstrap已经提供了最佳的响应式设计。但是，如果您想要添加更多响应，您可以使用html标记添加自己的类，然后使用特定宽度的媒体查询。

<div class="container class1">
    content here
</div>

<ul class="list-item class2">
  <li> list item </li>
</ul>

现在你必须在给定的类上应用你的css，在这种情况下是class1和class2

由于

Answer 6

我们有两个选择，

<强> 1。设置较大的静态高度......

将静态设置的宽度更改为较大的数字，比如说250px，这样可以很好地适应低分辨率...但桌面上会有太多（丑陋的）空白区域。

.inner1{
  width:100%;
  height:250px;
  margin-bottom:0px;
  overflow: auto;
}
.inner2{
  width:100%;
  height:250px;
  margin-bottom:0px;
  overflow: auto;
}

<强> 2。在resize ...

上动态计算高度

此工作适用于所有分辨率的所有分辨率，并且所有分辨率都需要空白;）对于这个

首先将.inner1和.inner2中的内容包装在容器中，我们在这里使用article ...这将有助于我们确定内容的高度。

现在将.inner1和.inner2 ...

的高度设置为100％

.inner1 {
  width: 100%;
  height: 100%; /* Set height as 100% */
  margin-bottom: 0px;
}
.inner2 {
  width: 100%;
  height: 100%; /* Set height as 100% */
  margin-bottom: 0px;
}

然后给.outer一个默认高度，例如160px

.outer {
  width: 100%;
  height: 160px;
  top: 0;
  position: relative;
}

最后一些JS让它工作;）

<强>更新
我们使用分配给var的函数而不是使用匿名函数。

在调整窗口大小时，我们检查inner1和inner2中内容的高度，使用Math.max使用内容更多的内容，然后将25px gutter添加到其中并将其设置为.outer height ... < / p>

  var fixWidths = function() {
    var
      $cDesc = $('.companyDescription');
    $cDesc.find('.outer').css(
      'height',
      Math.max(
        $cDesc.find('.inner1').children('article').outerHeight(),
        $cDesc.find('.inner2').children('article').outerHeight()
      ) + 25 // Maximum of the two
    )
  }

  $(window).resize(fixWidths);
  fixWidths();

<强>更新
确保你的JS代码包含在......

中

$(function() {
  ...
});

这将等到doc加载...

最后，我们以编程方式触发调整大小，以设置正确的初始状态。

一个工作示例

$(function() {
  $('#readMore').click(function() {
    $('.companyDescription').animate({
      scrollTop: $('#inner1').outerHeight() + 30
    }, 1000);
  })
  $('#readLess').click(function() {
    $('.companyDescription').animate({
      scrollTop: 0
    }, 1000);
  })

  var fixWidths = function() {
    var
      $cDesc = $('.companyDescription');
    $cDesc.find('.outer').css(
      'height',
      Math.max(
        $cDesc.find('.inner1').children('article').outerHeight(),
        $cDesc.find('.inner2').children('article').outerHeight()
      ) + 25 // Maximum of the two
    )
  }

  $(window).resize(fixWidths);
  fixWidths();
});

.company {
  padding-top: 160px;
  color: #000;
}
.companyDescription {
  margin: 20px 0 10px 0;
  overflow: hidden;
}
.outer {
  width: 100%;
  height: 160px;
  top: 0;
  position: relative;
}
.inner1 {
  width: 100%;
  height: 100%;
  /* Set height as 100% */
  margin-bottom: 0px;
}
.inner2 {
  width: 100%;
  height: 100%;
  /* Set height as 100% */
  margin-bottom: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-7 company">
      <h2>this is my title</h2>
      <div class="companyDescription">
        <div class="outer">
          <div class="inner1" id="inner1">
            <article>
              <h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
                                        </h5>
              <h5>Some kind of subtitle</h5>
              <h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
            </article>
          </div>
          <div class="inner2">
            <article>
              <h5><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
              <h5>As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
                                        </h5>
              <h5>the last subtitle.</h5>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是更新的小提琴...... https://jsfiddle.net/2nexo75j/16/

Answer 7

您是否包含“jquery-ui-1.10.4.min.js”文件？并且所有css js文件的顺序是否正确？因为您的相同代码和相同的样式和脚本都适用于我。请尝试以下代码。

<!DOCTYPE html>
<html>
<head>
    <title>Scroll</title>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>        
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
    <script>
        $(document).ready(function () {
            $('#readMore').click(function () {
                $('.companyDescription').animate({
                    scrollTop: $('#inner1').outerHeight() + 30
                }, 1000);
            });
            $('#readLess').click(function () {
                $('.companyDescription').animate({
                    scrollTop: 0
                }, 1000);
            });
        });
    </script>
    <style>
        .company {
            padding-top: 160px;
            color: #000;
        }

        .companyDescription {
            margin: 20px 0 10px 0;
            overflow:hidden;
        }

        .outer{
            width:100%;
            height:280px;
            top:0;
            position:relative;
        }

        .inner1{
            width:100%;
            height:270px;
            margin-bottom:0px;

        }
        .inner2{
            width:100%;
            height:280px;
            margin-bottom:0px;

        }
    </style>
</head>
<body>
    <div class= "container">
        <div class="row">
            <div class="col-sm-7 company">
                <h2>this is my title</h2>
                <div class="companyDescription" >
                    <div class="outer">
                        <div class="inner1" id="inner1">
                            <h5>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet
                            </h5><h5>Some kind of subtitle</h5>
                            <h5><a id="readMore" style="cursor: pointer; cursor: hand;">read more...</a></h5>
                        </div>
                        <div class="inner2">
                            <h5><a id="readLess" style="cursor: pointer; cursor: hand;">...read less</a></h5>
                            <h5>As the use of typewriters grew in the late 19th century, the phrase began appearing in typing and stenography lesson books as a practice sentence. Early examples of publications which used the phrase include Illustrative Shorthand by Linda Bronson (1888), How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890)
                            </h5>
                            <h5>the last subtitle.</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 8

您可以使用clearfix类

<div class="clearfix"></div>

如何调整基于引导程序的CSS代码，以便它对页面宽度更敏感？

8 个答案:

一个工作示例