固定宽度流式弹性布局

Posted 2020-10-12 L_mj

假设浏览器窗口设置为1250px；
wrapper的宽度为960px；
content的宽度为920px：确保了wrapper居中时两边有20px的间距；
? 　　secondary的宽度为230px；
? 　　primary的宽度为670px；
? ? 　　其中primary中的secondary的宽度为400px;
? ? 　　primary的宽度为230px;
? ? ? 　padding-right为20px。

固定宽度布局

宽度以像素为单位，这种布局类型成为固定宽度的布局，非常常见的一种。

• 优点：开发者对布局和定位有更大的控制能力，知道每个元素的精确宽度，就能够对它们进行精确的布局，而且知道所有东西在什么地方。
• 缺点：①宽度是固定的，无论窗口尺寸多大它们的尺寸都不变，所以空间利用率不高，不适应灵活的web。②行长和文本易读性：固定宽度布局往往适合于浏览器默认文本字号，但只要将文本字号增加几级，边栏就会挤满空间并且行长太短，阅读起来不舒服。
  为解决上述缺点，可使用流式布局或弹性布局代替固定宽度的布局。

流式布局

流式布局中尺寸用百分比而不是像素设置。

• 优点：使得能够相对于浏览器窗口进行伸缩，可以更好的利用空间。
• 缺点：①窗口宽度较小时行变得非常窄，很难阅读，所以有必要加上像素或em为单位的min-width，防止布局变得太窄，但min-width设置的太大也会遇到与固定宽度相同的问题。②如果设计横跨整个浏览器窗口，那么行就会变得太长，也很难阅读。解决方法：Ⅰ、让容器之跨越宽度的一部分，Ⅱ、用百分数设置内边距和外边距，Ⅲ、对于非常严重的问题，可以为容器设置最大宽度max-width，防止内容在大显示器上变得过宽。
  将固定宽度布局的三列转换为流式三列布局：

  <div class="wrapper">
      <div class="content">
          <div class="primary">
              <div class="primary">     </div>
              <div class="secondary">   </div>
          </div>
          <div class="secondary"> </div>
      </div>
  </div>
  <style>
          .wrapper{
              width:76.8%;   /*960÷1250=76.8%*/
              margin:0 auto;
              text-align:left;
              min-width : 62em; /*比较小的窗口尺寸，布局太挤，所以添加以em为单位的min-width*/
              max-width : 125em; /*设置为em为单位的max-width是为了确保文本行的长度适合阅读*/
          }
          .content{
              overflow: hidden;  /*加上此句后conten和wrapper容器的高度不再是0，而是100*/
          }
          .content .primary{
              width : 72.82%;  /*670÷920=72.82% ，因为在wrapper设置了水平居中，所以40px均匀分布在content容器两侧各20px*/
              float:right;
              display:inline;
          }
          .content .secondary{
              background-color: red;
              width:25%;   /*230÷920=25%*/
              float:left;
              display:inline;
          }
          .content .primary .primary{
              background-color: yellow;
              width:59.7%;  /*400÷670=59.7%*/
              float:left;
              display:inline;
          }
          .content .primary .secondary{
              background-color: blue;
              width:34.33%;   /*230÷670=34.33%*/
              padding-right:3%;   /*20÷670=3% 设置内边距，避免其包含的文本紧挨着元素的右边缘*/
              float:right;
              display:inline;
          }
  </style>

  流式布局的缺点：在大分辨率显示屏上，行仍然会过长，让用户不舒服，在窄窗口或在增加文本字号时，行会变得非常短，内容很零碎。解决方法：弹性布局。

弹性布局

相对于字号（而不是浏览器宽度）来设置元素的宽度，单位为em，可以确保在字号增加的时候整个布局随之扩大。
缺点：①不能充分的利用空间②因为在字号增加的时候整个布局随之扩大，所以弹性布局会变得比浏览器窗口宽，导致水平滚动条的出现，

解决方法是在容器div上添加100%的max-width。
将固定宽度布局的三列转换为弹性三列布局：

　　技巧：设置基字号，让1em大致相当于10px，浏览器默认字号是16px，10px是16px的62.5%，所以在主题上将字号设置为62.5%即可。

　　内部宽度仍使用百分数，只以em为单位设置容器的宽度，这样的话，内部宽度仍是相对于字号的，可以更方便的修改布局的总尺寸，不必修改每个元素的宽度，更灵活、更易操作。

<div class="wrapper">
    <div class="content">
        <div class="primary">
            <div class="primary">     </div>
            <div class="secondary">   </div>
        </div>
        <div class="secondary"> </div>
    </div>
</div>
<style>
        body{
            font-size:62.5%;
            text-align:center;
        }
        .wrapper{
            width:92em;   /*容器宽度以em为单位*/
            margin:0 auto;
            text-align:left;
            max-width : 95%;
        }
        .content{
            overflow: hidden;  /*加上此句后conten和wrapper容器的高度不再是0，而是100*/
        }
        .content .primary{
            width : 72.82%;  /*670÷920=72.82%  内部宽度仍使用百分数*/
            float:right;
            display:inline;
        }
        .content .secondary{
            background-color: red;
            width:25%;   /*230÷920=25%   内部宽度仍使用百分数*/
            float:left;
            display:inline;
        }
        .content .primary .primary{
            background-color: yellow;
            width:59.7%;  /*400÷670=59.7% 内部宽度仍使用百分数*/
            float:left;
            display:inline;
        }
        .content .primary .secondary{
            background-color: blue;
            width:34.33%;   /*230÷670=34.33%  内部宽度仍使用百分数*/
            padding-right:2em;   /*2em=20px 设置内边距，避免其包含的文本紧挨着元素的右边缘*/
            float:right;
            display:inline;
        }
</style>