zoukankan      html  css  js  c++  java
  • 你不知道的css各类布局(二)之流体布局、液体布局、栅格布局

    流体布局

    什么是流

    在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局

    概念

    流体布局(Liquid/Fluid Layout)指的是利用元素“流”的特性实现的各类布局,流式布局采用了相对长度单位(%、em、rem、vm、vh)。典型的流式布局是采用百分比(%)作为主要区块的单位, 当然其他的相对单位(em)也是同样适用

    布局特点

    ** 因为“流”本身具有自适应特性,所以流体布局往往都是具有自适应特性的,但是流体布局并不等同于自适应布局,自适应布局是对凡是具有自适应特性的一类布局的统称,流体布局要狭隘一些。

    流体布局的特点是页面元素的宽度根据屏幕分辨率进行适配调整,但整体布局不变,这就导致如果屏幕太大或者太小都会导致元素无法正常显示,代表作栅栏系统(网格系统)

    网页中主要划分区域使用百分比搭配(min-*、max-*属性使用)例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。

    这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式

    设计方法

    使用%百分比定义宽度,高度和文字大小都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。

    往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

    如果用户的屏幕对于可用布局太小或太大,这两个属性便可以创建固定的宽度。在这种情况下,布局会产生滚动条,并且在功能上成为了固定宽度布局

    总体框架

     

    可以根据屏幕宽度改变了内容的宽度,也可以对空白区域使用了不同的宽度。

    优点

    • 页面会伸展到整个浏览器窗口,所以即使在大屏幕上,页面的周围 也没有空白;

    • 如果用户的窗口很小,页面就会收缩以适应窗口,而不必横向滚动;

    • 即使用户设置的字体比设计人预设的更大,这种设计也可以适应(因为页面可以伸展)。

    缺点

    • 如果不对页面各个部分的宽度加以控制,那么页面设计会和预期的效果大相径庭,例如某些项目或元素挤压到一起,其周围出现意想不到的空隙;

    • 如果一个固定宽度的元素位于一个不能容纳它的盒子里,那么这个元素就会溢出盒子。

    • 设计者无法掌控用户看到的效果,并且容易忽视一些问题,因为在他们特定的分辨率屏幕上,布局看起来很好。

    • 图像,视频和其他类型的内容可能需要多个宽度设置,以适应不同的屏幕分辨率。

    • 难以置信的是,大屏幕分辨率可能会因为缺少内容而产生多余的空白空间,从而减少了美感。

    • 无论当前浏览器宽度是多少,流式布局页面横向上通常会充满整个浏览器,所以它的缺点也显而易见。当浏览器宽度非常大时,页面内容会被拉伸的很宽,段落元素也会占满整个一行。相反的,当浏览器宽度很很窄时,页面元素会

         挤在一起。

    注意

    由于流体布局可以伸展到浏览器窗口的整个宽度,产生难以阅读的长文本行,所以有些流媒体布局只让页面的一部分伸展和收缩。在页面的其它部分则限制最大和最小宽度。

    液体布局

    液体布局是流体布局的别名

    栅格布局

    栅格布局是流体布局的一种

     

  • 相关阅读:
    Mysql 查看 数据库/表 磁盘占用
    COLA 4.0 整洁面向对象分层架构
    《语言选择与就业方向》(2010/06/09)
    《为什么程序员不愿写文档》(2010/06/22)
    《我?还是我们?》(2010/06/30)
    《选择大公司还是小公司》(2010/06/11)
    《加班,加班,加班》(2010/06/17)
    《薪水的苦恼》(2010/06/15)
    《新手面试时的常见问题和对策》(2010/06/15)
    《大量编程带来的快乐和烦恼》(2010/06/20)
  • 原文地址:https://www.cnblogs.com/kunmomo/p/11648203.html
Copyright © 2011-2022 走看看