CSS没有调整网格中的项目大小

时间：2015-04-13 12:45:58

标签： html css css3 responsive-design media-queries

我在网格中的项目没有针对平板电脑和移动视图的响应速度进行调整。他们正在切断。非常感谢任何帮助。

如果您需要查看正在发生的事情的屏幕截图，请告诉我。 

.ch-grid {
  margin: -10px 0 0 0;
  padding: 0;
  list-style: none;
  display: block;
  text-align: center;
  width: 100%;
  overflow: hidden;
  height: auto;
  clear: both;
}
.ch-grid:after,
.ch-item:before {
  content: '';
  display: table;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  clear: both;
}
.ch-grid:after {
  clear: both;
}
.ch-grid li {
  width: 200px;
  height: 200px;
  display: inline-block;
  margin: 10px;
  overflow: hidden;
}
.ch-item {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  cursor: default;
  box-shadow: inset 0 0 0 0 rgba(247, 168, 0, 0.4), inset 0 0 0 16px rgba(247, 168, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 5;
}
.ch-img-4 {
  background-image: url(images/4.jpg);
}
.ch-img-5 {
  background-image: url(images/5.jpg);
}
.ch-img-6 {
  background-image: url(images/6.jpg);
}
.ch-img-1 {
  background-image: url(images/1.jpg);
}
.ch-img-2 {
  background-image: url(images/2.jpg);
}
.ch-img-3 {
  background-image: url(images/3.jpg);
}
.ch-info {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-backface-visibility: hidden;
  /*for a smooth font */
}
.ch-info h3 {
  color: #fff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 22px;
  margin: 0 30px;
  padding: 65px 0 0 0;
  height: 110px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
  color: #fff;
  padding: 10px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
  display: block;
  color: #fff;
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  padding-top: 4px;
  font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
  color: #fff222;
  color: rgba(247, 168, 0, 0.8);
}
.ch-item:hover {
  box-shadow: inset 0 0 0 110px rgba(0, 155, 222, 0.4), inset 0 0 0 16px rgba(0, 155, 222, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.mini-title {
  position: absolute;
  z-index: 2000;
  top: 10%;
  left: 0;
  margin: auto;
  color: #fff;
  text-align: center;
  right: 0;
  overflow: hidden;
  padding-bottom: 0px;
  margin-bottom: 0px;
  width: auto;
  height: auto;
  clear: both;
  min-width: 250px;
}
<section class="bg-image section-g clearfix">
  <div class="image-wrapper col-md-6 col-sm-3 pull-left">
    <div class="background-image-wrapper wow slideInLeft">
      <img class="background-image" alt="" src="images/bg_01.jpg">
      <div class="mini-title">
        <ul class="ch-grid">
          <li>
            <div class="ch-item ch-img-4">
              <div class="ch-info">
                <h3>Gail</h3>
                <p>mom</p>
              </div>
            </div>
          </li>
          <li>
            <div class="ch-item ch-img-5">
              <div class="ch-info">
                <h3>Jeff</h3>
                <p>dad</p>
              </div>
            </div>
          </li>
          <li>
            <div class="ch-item ch-img-6">
              <div class="ch-info">
                <h3>Heidi</h3>
                <p>equestrian</p>
              </div>
            </div>
          </li>
        </ul>
        <ul class="ch-grid">
          <li>
            <div class="ch-item ch-img-1">
              <div class="ch-info">
                <h3>Joey</h3>
                <p>drummer</p>
              </div>
            </div>
          </li>
          <li>
            <div class="ch-item ch-img-2">
              <div class="ch-info">
                <h3>Laura</h3>
                <p>soccer player</p>
              </div>
            </div>
          </li>
          <li>
            <div class="ch-item ch-img-3">
              <div class="ch-info">
                <h3>Sara</h3>
                <p>artist</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- end mini-title -->
    </div>
  </div>

1 个答案:

答案 0 :(得分：1)

您可以使用vh和vw根据视口尺寸显示尺寸。这样，您就可以指定h3代码的高度：

.ch-info h3 {
      color: #fff;
      text-transform: uppercase;
      position: relative;
      letter-spacing: 2px;
      font-size: 22px;
      margin: 0 30px;
      padding: 65px 0 0 0;
      height: 15vh;
      font-family: 'Open Sans', Arial, sans-serif;
      text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

或者你想要的任何东西。

  

请参阅代码段以获取示例：

.ch-grid {
  margin: -10px 0 0 0;
  padding: 0;
  list-style: none;
  display: block;
  text-align: center;
  width: 100%;
  overflow: hidden;
  height: auto;
  clear: both;
}
.ch-grid:after,
.ch-item:before {
  content: '';
  display: table;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  clear: both;
}
.ch-grid:after {
  clear: both;
}
.ch-grid li {
  width: 200px;
  height: 200px;
  display: inline-block;
  margin: 10px;
  overflow: hidden;
}
.ch-item {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  cursor: default;
  box-shadow: inset 0 0 0 0 rgba(247, 168, 0, 0.4), inset 0 0 0 16px rgba(247, 168, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 5;
}
.ch-img-4 {
  background-image: url(images/4.jpg);
}
.ch-img-5 {
  background-image: url(images/5.jpg);
}
.ch-img-6 {
  background-image: url(images/6.jpg);
}
.ch-img-1 {
  background-image: url(images/1.jpg);
}
.ch-img-2 {
  background-image: url(images/2.jpg);
}
.ch-img-3 {
  background-image: url(images/3.jpg);
}
.ch-info {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-backface-visibility: hidden;
  /*for a smooth font */
}
.ch-info h3 {
  color: #fff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 22px;
  margin: 0 30px;
  padding: 65px 0 0 0;
  height: 15vh;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
  color: #fff;
  padding: 10px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
  display: block;
  color: #fff;
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
  padding-top: 4px;
  font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
  color: #fff222;
  color: rgba(247, 168, 0, 0.8);
}
.ch-item:hover {
  box-shadow: inset 0 0 0 110px rgba(0, 155, 222, 0.4), inset 0 0 0 16px rgba(0, 155, 222, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.mini-title {
  position: absolute;
  z-index: 2000;
  top: 10%;
  left: 0;
  margin: auto;
  color: #fff;
  text-align: center;
  right: 0;
  overflow: hidden;
  padding-bottom: 0px;
  margin-bottom: 0px;
  width: auto;
  height: auto;
  clear: both;
  min-width: 250px;
}
<section class="bg-image section-g clearfix">
  <div class="image-wrapper col-md-6 col-sm-3 pull-left">
    <div class="background-image-wrapper wow slideInLeft">
      <img class="background-image" alt="" src="images/bg_01.jpg">
      <div class="mini-title">
        <ul class="ch-grid">
          <li>
            <div class="ch-item ch-img-4">
              <div class="ch-info">
                <h3>Gail</h3>
                <p>mom</p>
              </div>
            </div>
          </li>
          <li>
            <div class="ch-item ch-img-5">
              <div class="ch-info">
                <h3>Jeff</h3>
                <p>dad</p>
              </div>
            </div>
          </li>
          <li>
            <div class="ch-item ch-img-6">
              <div class="ch-info">
                <h3>Heidi</h3>
                <p>equestrian</p>
              </div>
            </div>
          </li>
        </ul>
        <ul class="ch-grid">
          <li>
            <div class="ch-item ch-img-1">
              <div class="ch-info">
                <h3>Joey</h3>
                <p>drummer</p>
              </div>
            </div>
          </li>
          <li>
            <div class="ch-item ch-img-2">
              <div class="ch-info">
                <h3>Laura</h3>
                <p>soccer player</p>
              </div>
            </div>
          </li>
          <li>
            <div class="ch-item ch-img-3">
              <div class="ch-info">
                <h3>Sara</h3>
                <p>artist</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- end mini-title -->
    </div>
  </div>

  编辑：正如@Jamie Barker注意到的，这个解决方案不是100％工作，具体取决于视口大小。要防止出现这种情况，您可以对平板电脑/手机或max-height

使用媒体查询
相关问题
最新问题