前端布局方式汇总及概念浅析

时间: 2018-05-22阅读: 1256标签: 布局

一、基础布局方式

0. 普通/文档流 布局

早期 <table>, 后来 <div> ,再后来 html5 语意化标签按照自上而下的方式顺次排布。


1. Float 布局 float: left/right

最初设计目的是用于图文环绕排版、不过目前常用于左右布局。


2. 绝对布局 position: absolute,position: fixed

保持与目标元素(position不为static的最近父元素)的绝对距离,使用场景有顶部固定的广告栏,瀑布流等等。


3. Grid 网格布局: display:grid

较为系统的布局方案,详见:https://www.w3cplus.com/css/learncssgrid.html


4. css3 Flex 弹性盒子布局: display:flex

较为系统的布局方案,详见:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool


二、常见的布局概念以及实现方法

0. 静态布局

静态布局:网页布局始终按照固定的布局和尺寸来显示,不使用 Flex 之类的弹性盒子方案。

实现方法:

  • 普通/文档流 布局
  • Float 布局
  • 绝对布局

对于PC:一般居中布局,所有样式使用绝对宽度/高度(px),屏幕宽高有调整时,使用滚动条来查阅被遮掩部分;

对于移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如 wap.或m., 在 <viewport meta> 标签上设置 width,页面的各个元素也采用px作为单位。通过用 js 动态修改标签的initial-scale使得页面等比缩放,从而刚好占满整个屏幕。

优点:这种布局方式对设计师和 css 编写者来说都是最简单的,亦没有兼容性问题。

缺点显而易见,不能根据用户的屏幕尺寸做出不同的展现:

  • 窄屏幕滚动条体验很差
  • 宽屏有大片空白,不利于空间利用

1. 流式布局

流式布局目的是在不同大小的设备上满屏呈现同样网页。它是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)。

实现方法:

  • 允许网页宽度自动调整:<meta name="viewport" content="width=device-width, initial-scale=1" />
  • 不使用绝对尺寸(包括容器/字体/图片),使用百分比、em、rem、vw、vh 等
  • 可使用 flex 等弹性盒子(不要使用 px 定尺寸)

优点:页面左右满屏。

但缺点明显:

  • 使用百分比定义,所以在大屏幕的手机/Pad 下(或者横屏下)显示效果会变成有些页面元素被拉的很大,但是内容数量却不变,显得稀疏不紧凑,空间利用率低下。
  • 如果文字也按照百分比放大,则整体效果会非常不协调(老人机效果)。


2. 自适应布局

自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局(页面元素位置可能发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。

自适应布局看作是静态布局的一个合集。

实现方式:

  • 静态布局方法
  • 分辨率 detector(media query/server-side detector/UA)

自适应布局 页面里面元素的位置会变化,很好的解决了流式布局中的大屏空间利用率不高弊端

缺点:单个布局容器无法灵活伸缩,未触发布局切换的情况下,容器仍然容易出现静态布局中提到的问题。


3. 响应式布局

响应式布局同样分别为不同的屏幕分辨率定义布局。改变屏幕分辨率可以通过 CSS Media query 实时地切换不同的布局(页面元素位置可能发生改变),在每个布局中,页面元素会随窗口大小的调整发生流式布局中的自动尺寸变化。

实现方式:

  • 流式布局
  • CSS media query

响应式布局 融合了流式布局和自适应布局的优势

缺点:CSS 代码繁琐,对于特定的设备有较多冗余,适用于对于各个终端(特别是移动端)性能要求不高的 Blog Dos 站点。


三、关于网页设计

布局的目的,归根结底,都是为了网页设计服务。那么就顺带聊一聊和响应式设计(RWD)和自适应设计(AWD)。


1. 响应式设计(RWD)

Wikipedia: Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes. Content, design and performance are necessary across all devices to ensure usability and satisfaction

“Progressive enhancement”“one-fits-all”

响应式设计基于响应式布局,使用同一套页面在各种各样不同大小的设备上进行大小合适、布局(甚至功能)合理的展现。

响应式设计会根据识别屏幕宽度对于展示的具体内容块进行位置调整,甚至展示和隐藏。

实现方式:

  • 响应式布局
  • 特性检测 (用于网页功能的渐进增强)

2. 自适应设计(AWD)

Wikipedia: Adaptive web design is a process of server-side detection that chooses a design layout and size to display. All types of web design layouts can be used, including responsive layout. The adaptive design will serve different versions of the site to different devices based on common screen sizes and resolutions. The only difference is the way the design is looked at from a collateral or device viewpoint rather than the responsive web design (RWD) one-size-fits-all approach to layout

“All types of web design layouts”“different versions to different devices”,

自适应设计是通过服务端检测设备类型、从 site 的不同版本中选择最合适该设备类型的设计布局/尺寸的版本进行展示。它可以使用到所有(包括响应式布局)布局方案。

实现方式:

  • server-side detection
  • different versions to different devices
    对于 PC: 可使用流式布局;
    对于 Mobile: 可使用流式布局。推荐一个 Rem 解决方案:
    • 设置元素(可以包括字体等)大小为 rem (rem 是以跟元素font-size为基准的单位)
    • 按照屏幕宽度的不同,js 动态设置 <html> 的 font-size 大小,元素同样会按照屏幕宽度等比例放大缩小


RWD 和 AWD 的异同

相同点:

  • 均针对不同的分辨率/device 采用不同的样式和布局达到页面展示最优
  • 布局方式本质没有差别(AWD 也 including responsive layout)

不同点:

  • 前者强调同一套页面多端兼容展示,而后者给出多套页面,对于不同 device 进行了分类处理
  • 前者是通过 CSS Media query 进行分辨率检测,可以实时的响应浏览器尺寸变化,改变元素尺寸/布局,而后者一般是 server side detection,一次性渲染既定布局和样式


Reference

  1. “Responsive web design”, wikipedia, https://en.wikipedia.org/wiki/Responsive_web_design;
  2. “Adaptive web design”, wikipedia, https://en.wikipedia.org/wiki/Adaptive_web_design;
  3. 《浅谈响应式Web设计与实现思路》, 熊建刚的博客, http://blog.codingplayboy.com/2018/01/06/responsive-web-design/;
  4. 《Responsive Web Design? Adaptive Web Design? Don’t Despair!》, Elegant MicroWeb, http://www.linkedin.com/pulse/responsive-web-design-adaptive-you-find-hard-decide-dont-microweb;
  5. 《自适应网页设计(Responsive Web Design)》, 阮一峰的网络日志, http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html;

原文来源:http://elevenbeans.github.io/2018/01/12/front-end-layout-methods/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/799

关闭

rem布局原理

rem 是(根)字体大小相对单位,也就是说跟当前元素的font-size没有关系,而是跟整个body的font-size有关系,物理像素是硬件的一个实际像素;而逻辑像素是我们在网页设计中使用的像素

css实现div垂直水平居中的2种常用方法

利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件;这种方法比较暴力,利用定位解决:父元素开启相对定位,子元素绝对定位

html使用frame框架导航跳转至指定的节的用法

主要内容:左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰、一目了然能够看清事情发生的过程,UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的?

IOS 浏览器页面布局错位(如:点不到)的分析与解决

IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素):明明按钮在这里,却要在上面一点儿点击屏幕才能点到它

理解css中Grid布局,在项目中如何实现grid页面布局

CSS中Grid是一种二维网格式布局方式,Grid是为了解决二维布局问题而创建的CSS模块。使用Gird的好处,Gird在浏览器的兼容性,Grid布局的示例源码...

Flexbox响应式网页布局

透过Flexbox实现响应式网页布局同样可分为三步:将容器显示为flex,并让它wrap;将需要响应的元素放在容器当中,并用百分比设定每一个元素的basis;通过Media Query将容器的flex方向改为column(预设为row)。

布局和WEB性能

在初始页面加载问题之外,“布局颠簸”是我在动态Web应用程序中看到的最常见的性能问题。 对于单页应用程序尤其如此,它可以动态构建和销毁视图

底部粘连(stiky footer)布局

在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送

CSS flex布局入门

都知道html正常的文档流是自上而下排列的,块级元素会像下左图一样排列。但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列。虽然可以通过dispaly:inline-block、float、position完成排版,但是需要对距离进行计算,计算起来十分麻烦

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!