2019年前端五大布局，你学会了多少？

水深无声 2022-05-13 05:04 159阅读 0赞

# 一、静态布局 #

静态布局就是传统的网站形式，网页上的所有元素的尺寸一律使用px作为单位。

### 1.布局特点 ###

不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。

### 2.设计方法 ###

> \--------PC--------  
> 居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，当窗口缩小时，内容被遮挡，呈现横竖向滚动条。   
> \--------优点--------  
> 这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。  
> \--------缺点--------  
> 显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

# 二、自适应布局 #

简单来说就是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。

### 1.布局特点 ###

屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

### 2.设计方法 ###

> 使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。  
> 在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

### 3.示例 ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>宽度自适应布局</title>
            <style>
                .wrap {
                    background-color: #FBD570;
                    margin-left: 100px;
                    margin-right: 150px;
                }
                .clearfix:after {
                    content: "";
                    clear: both;
                    display: block;
                }
                .left {
                    float: left;
                    width: 100px;
                    background: #00f;
                    height: 180px;
                    margin-left: calc(-100% - 100px); 
                }
                .right {
                    float: right;
                    width: 150px;
                    background: #0f0;
                    height: 200px;
                    margin-right: -150px;
                }
                .center {
                    background: #B373DA;
                    height: 150px;
                    float: left;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div class="wrap clearfix">
                <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>
                <div class="left">left，宽度固定，高度可固定也可以由内容撑开</div>
                <div class="right">right，宽度固定，高度可固定也可以由内容撑开</div>
            </div>
        </body>
    </html>

# 三、流式布局 #

页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变（栅格布局）。

### 1.布局特点 ###

当屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

### 2.设计方法 ###

（1）使用百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

（2）这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

（3）因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调。

### 3.主要的问题 ###

> 是在于如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。网页中主要的划分区域的尺寸使用百分数（搭配min-\*、max-\*属性使用）。例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

# 四、响应式布局 #

为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。响应式几乎已经成为优秀页面布局的标准。

### 1. 布局特点 ###

每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

### 2. 设计方法 ###

媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

> \--------优点--------  
> 适应pc和移动端，如果足够耐心，效果完美。
> 
> \--------缺点--------  
> （1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。  
> （2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

响应式页面一般会在头部加上这一段代码：

### 3.示例 ###

一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。@media all(用于所有的设备) || screen (用于电脑屏幕,平板电脑,智能手机等)  and|not|only(三个关键字可以选)。随着缩放就会看到颜色的变化。

<!DOCTYPE html>
    <html>
    <head>
    <meta name="applicable-device" content="pc,mobile">
    <meta http-equiv="Cache-Control" content="no-transform ">
    <style media="screen">
        @media screen and (max-width:600px){
          .con{
            background:red;
          }
        }
        @media screen and (min-width:600px) and (max-width:800px){
          .con{
            background:blue;
          }
        }
        @media screen and (min-width:800px){
          .con{
            background:green;
          }
        }
        .con{
          width: 100%;
          height: 100px;
        }
      </style>
    </head>
    <body>
      <div class="con">
    
      </div>
    </body>
    </html>

# 五、弹性布局（rem/em布局） #

rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。使用rem单位的弹性布局在移动端很受欢迎。

### 1.优点 ###

> (1)适应性强，在做不同屏幕分辨率的界面时非常实用
> 
> (2)可以随意按照宽度、比例划分元素的宽高
> 
> (3)可以轻松改变元素的显示顺序
> 
> (4)弹性布局实现快捷，易维护

### 2.属性设置 ###

<table> 
 <tbody> 
  <tr> 
   <td style="width:271px;">display:box</td> 
   <td style="width:620px;">将一个元素的子元素以弹性布局进行布局</td> 
  </tr> 
  <tr> 
   <td style="width:271px;">box-orient:horizontal &nbsp;|| vertical || inherit</td> 
   <td style="width:620px;">子元素排列方式&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:271px;">box-align:start || end || center</td> 
   <td style="width:620px;">子元素的对齐方式 (规定水平框中垂直位置 或 垂直框中水平位置)</td> 
  </tr> 
  <tr> 
   <td style="width:271px;">box-flex:number</td> 
   <td style="width:620px;">子元素如何分配剩余空间</td> 
  </tr> 
  <tr> 
   <td style="width:271px;">box-ordinal-group:number</td> 
   <td style="width:620px;">子元素显示顺序</td> 
  </tr> 
  <tr> 
   <td style="width:271px;">box-direction:normal || reverse || inherit</td> 
   <td style="width:620px;">子元素的排列顺序</td> 
  </tr> 
  <tr> 
   <td style="width:271px;">box-pack: start || end || center</td> 
   <td style="width:620px;">子元素的对齐方式(规定水平框中水平位置 或 垂直框中垂直位置)</td> 
  </tr> 
 </tbody> 
</table>

### 3.示例 ###

<!DOCTYPE html>
    <html>
    	<head>
    	<style>
        body,html{
          width: 100%;
          height: 100%;
          display: -webkit-box;
          -webkit-box-orient:vertical;
          -webkit-box-align:center;
          -webkit-box-pack:center;
        }
        .con{
          width: 90%;
          height: 90%;
          display: -webkit-box;
          -webkit-box-orient:vertical;
          border: 1px solid red;
        }
        .con .head{
          height: 200px;
          display: -webkit-box;
          -webkit-box-orient:horizontal;
        }
        .con .head .logo{
          width: 100px;
          height: 200px;
          background: pink;
        }
        .con .head .logoCon{
          height: 200px;
          -webkit-box-flex:1;
          background: green;
        }
        .con .content{
          -webkit-box-flex:1;
          background: orange;
          display: -webkit-box;
          -webkit-box-orient:horizontal;
          -webkit-box-direction:reverse;
        }
        .content div{
          width: 200px;
          text-align: center;
        }
        .con .footer{
          height: 100px;
          background: blue;
        }
      </style>
    </head>
    <body>
    <div class="con">
      <div class="head">
        <div class="logo"></div>
        <div class="logoCon"></div>
      </div>
      <div class="content">
        <div class="con1">111</div>
        <div class="con2">222</div>
        <div class="con3">333</div>
      </div>
      <div class="footer">
      </div>
    </div>
    </html>

[点击此链接][Link 1]，可以查看静态布局、自适应布局、流式布局、响应式布局的效果。

[Link 1]: http://wow.techbrood.com/fiddle/1753