前端开发中的几大布局的详细总结

最新推荐文章于 2024-06-30 14:12:20 发布

子月吾生

最新推荐文章于 2024-06-30 14:12:20 发布

阅读量3.1k

点赞数 2

分类专栏： css 深入前端文章标签： CSS布局

本文链接：https://blog.csdn.net/Sunday97/article/details/84591190

版权

css 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

深入前端

6 篇文章 0 订阅

订阅专栏

一，静态布局（Static Layout）

居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，当窗口缩小时，内容被遮挡，呈现横竖向滚动条。使用横向和竖向的滚动条来查阅被遮掩部分
不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置

二，弹性布局（Elastc Layout）

是CSS3引入的布局方式，其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：

flex-flow:< flex-direction>||< flex-wrap>
flex-direction: row（初始值） | row-reverse | column | column-reverse
flex-wrap: nowrap（初始值） | wrap | wrap-reverse

flex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。
flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。

两者结合起来即flex-flow属性就确定了弹性容器在main axis和cross axis两个方向上的显示方式

三，自适应布局（Adaptive Layout）

分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

四，流式布局（Liquid Layout）

页面元素的宽度按照屏幕进行适配调整。
使用百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
看到的结果是页面中元素的大小会变化而位置不会变化——这就导致如果屏幕尺度跨度太大都会导致元素无法正常显示

五，响应式布局(Responsive Layout)

响应式布局是媒体查询+流式布局的综合使用。
一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。@media all(用于所有的设备) || screen (用于电脑屏幕,平板电脑,智能手机等) and|not|only(三个关键字可以选)。

（1）例如做移动端网站时就会在头部head标签中写入如下的meta标签：

< meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
name="viewport"   名称=视图

width=device-width 页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

2，每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变，就会用到媒体查询（media query）
媒体查询是响应式布局的核心。

例如要在一个分辨率大于360px的终端上设置样式

 @media screen and(min-width:360px){
            #idName{
                border:1px solid red;
            }
        }

当兼容ipad和iphone视图时

/**ipad**/
  @media only screen and (min-width:768px) and(max-width:1024px){}
/**iphone**/
 @media only screen and (width:320px) and (width:768px)

例如下面的示例会随着设备尺寸的变换颜色发生变化

<!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){
      .test{
        background:yellow;
      }
    }
    @media screen and (min-width:600px) and (max-width:800px){
      .test{
        background:pink;
      }
    }
    @media screen and (min-width:800px){
      .test{
        background:red;
      }
    }
    .test{
      width: 100%;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="test">
  </div>
</body>
</html>