html - 根据分辨率折叠 div

Question

我有 6 个 div float 权限。我使用百分比来表示响应度，连续 3 个 div 共享 33.3%。对于我的笔记本电脑分辨率来说效果很好——但是当我将屏幕大小调整得越来越小时，div 开始崩溃。似乎无法找到解决办法，如果有人愿意解释为什么会这样，尽管百分比是对我假设的个人视口(viewport)的引用？

.routine-content {
  text-align: center;
}

.routine-content ul li {
  display: block;
  line-height: 1.1em;
  font-family: 'amiri';
  margin-top: 10px;
}

.routine {
  max-width: 30.3333333333%;
  float: left;
  margin-top: 20px;
  margin-left: 3%;
  word-wrap: break-word;
  vertical-align: top;
}

.routine-content h1 {
  font-family: 'Pacifico', sans-serif;
  font-size: 30px;
  text-decoration: underline;
}

.routine-content h2 {
  font-family: 'Amaranth';
  margin-bottom: 10px;
  font-size: 18px;
}

.routine span {
  font-weight: bolder;
}

.routine-content p {
  font-family: 'amiri';
  width: 50%;
  text-align: center;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 18px;
}

<div class="routine-content">
  <div class="inner-wrapper">



    <!-- Monday Routine -->
    <div class="routine monday">
      <h2>Monday</h2>
      <ul>
        <li>
          <span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
        </li>

        <li>
          <span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your head..
        </li>

        <li>
          <span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
        </li>

        <li>
          <span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground for.
        </li>
      </ul>
    </div>

    <!-- Tuesday Routine -->
    <div class="routine tuesday">
      <h2>Tuesday</h2>


      <ul>
        <li>
          <span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
        </li>

        <li>
          <span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so. loor.
        </li>

        <li>
          <span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't available, try a bent-over row.
        </li>

        <li>
          <span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground.
        </li>
      </ul>
    </div>

    <!-- Wednsday Routine -->
    <div class="routine wednesday">
      <h2>Wednesday</h2>
      <ul>
        <li>
          <span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees..
        </li>

        <li>
          <span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so.
        </li>

        <li>
          <span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
        </li>

        <li>
          <span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground for this one if that feels more comfortable.
        </li>
      </ul>
    </div>

    <!-- Thursday Routine-->
    <div class="routine thursday">
      <h2>Thursday</h2>
      <ul>
        <li>
          <span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
        </li>

        <li>
          <span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your head, back.
        </li>

        <li>
          <span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
        </li>

        <li>
          <span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: one if that feels more comfortable.
        </li>
      </ul>
    </div>

    <!-- Friday Routine -->
    <div class="routine friday">
      <h2>Friday</h2>
      <ul>
        <li>
          <span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your. and don't let your knees go over your toes during this lower-body move.
        </li>

        <li>
          <span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your the bench, your feet flat on the floor.
        </li>

        <li>
          <span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
        </li>

        <li>
          <span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You .
        </li>
      </ul>
    </div>

    <!-- Saturday Routine -->
    <div class="routine saturday">
      <h2>Saturday</h2>


      <ul>
        <li>
          <span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your.
        </li>

        <li>
          <span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so. loor.
        </li>

        <li>
          <span>Dumbbell Row</span>—12 reps each side. Quick tip: If you, try a bent-over row.
        </li>

        <li>
          <span>Lying Isometric Y</span>,—Hold for 30 seconds. You can keep your legs on the ground.
        </li>
      </ul>
    </div>

  </div>
</div>

Answer 1

我不是很确定你所说的崩溃是什么意思，但我认为这应该可以解决它。您可以根据设备宽度激活不同的 CSS(参见 here)。我在下面做了这个。因此，当宽度低于 500px 时，每行将只显示一个锻炼。否则，将像目前一样每行三个。随意调整 max-width 参数，看看哪种效果最好。

.routine-content{
    text-align:center;
}
.routine-content ul li{
    display:block;
    line-height:1.1em;
    font-family:'amiri';
    margin-top:10px;

}

.routine{
    max-width:30.3333333333%;
    float:left;
    white-space: normal;
    margin-top:20px;
    margin-left:3%;
    word-wrap:break-word;
    vertical-align:top;


}

.routine-content h1{
    font-family:'Pacifico',sans-serif;
    font-size:30px;
    text-decoration: underline;
}

.routine-content h2{
    font-family:'Amaranth';
    margin-bottom:10px;
    font-size:18px;
}

.routine span{
    font-weight: bolder;
}
.routine-content p{
    font-family:'amiri';
    width:50%;
    text-align:center;
    margin: 0 auto;
    margin-top:20px;
    font-size: 18px;
}

@media screen and (max-width: 500px) {
    .routine {
      text-align: center;
      max-width:100%;
      display: block;
      float: center;
      clear: both;
    }
}

<div class = "routine-content">
	<div class = "inner-wrapper">

	
    <div style="width:100%;">
		<!-- Monday Routine -->
		<div align="center" class = "routine monday">
			<h2 class="workoutheader">Monday</h2>
			<ul>
				<li>
				<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
				</li>

				<li>
				<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your head..
				</li>

				<li>
				<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
				</li>

				<li>
				<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground for.
				</li>
			</ul>
		</div>

		<!-- Tuesday Routine -->
		<div align="center" class = "routine tuesday">
			<h2>Tuesday</h2>


			<ul>
				<li>
				<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
				</li>

				<li>
				<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so. loor.
				</li>

				<li>
				<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't available, try a bent-over row.
				</li>

				<li>
				<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground.
				</li>
			</ul>
		</div>

		<!-- Wednsday Routine -->
		<div align="center" class = "routine wednesday">
			<h2>Wednesday</h2>
			<ul>
				<li>
				<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees..
				</li>

				<li>
				<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so.
				</li>

				<li>
				<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
				</li>

				<li>
				<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground for this one if that feels more comfortable.
				</li>
			</ul>
		</div>
</div>
<div align="center" style="width:100%">
		<!-- Thursday Routine-->
		<div class = "routine thursday">
			<h2>Thursday</h2>
			<ul>
				<li>
				<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
				</li>

				<li>
				<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your head, back.
				</li>

				<li>
				<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
				</li>

				<li>
				<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: one if that feels more comfortable.
				</li>
			</ul>
		</div>

		<!-- Friday Routine -->
		<div align="center" class = "routine friday">
			<h2>Friday</h2>
			<ul>
				<li>
				<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your. and don't let your knees go over your toes during this lower-body move.
				</li>

				<li>
				<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your the bench, your feet flat on the floor.
				</li>

				<li>
				<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
				</li>

				<li>
				<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You .
				</li>
			</ul>
		</div>

		<!-- Saturday Routine -->
		<div align="center" class = "routine saturday">
			<h2>Saturday</h2>


			<ul>
				<li>
				<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your.
				</li>

				<li>
				<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so. loor.
				</li>

				<li>
				<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you, try a bent-over row.
				</li>

				<li>
				<span>Lying Isometric Y</span>,—Hold for 30 seconds. You can keep your legs on the ground.
				</li>
			</ul>
		</div>
<div>
	</div>
</div>