html中的布局主要由静态布局、自适应布局、流式布局以及响应式布局几类，简单比较以下这几种布局的区别和特点。

一 静态布局（Static Layout）

表现：在传统web设计中，不管浏览器尺寸具体大小多少，网页的布局会一直按照最开始的布局来显示。

特点：固定死宽高。

二 自适应布局（Adaptive Layout）

表现：就是为了不同屏幕的分辨率来定义不同的布局，并且在每个布局中的页面元素不随着窗口的大小变化而改变。

特点：自适应布局可以看做是静态布局的一个系列，即元素的位置随着网页大小发生变化而元素的大小不变。

三 流式布局（Liquid Layout）

表现：实质是百分比布局，只有一套布局，页面元素会随着窗口大小变化而改变。

特点：当窗口变得过小或过大，页面元素就不能正常显示。

1 百分比的特点

尺寸百分比：如width = 20%；

位置百分比：如left = 30%；

2 单位

1）em：参考点继承于父级字体大小

例如：

<div style = “font-size:14px;”>

    <div style = “font-size:2em”></div><!—字体继承父级为28px-->

</div>

2）rem；相对于（root根元素）html元素设置的字体大小

确定rem的三个步骤：

a:确定基数，一般为10px；

b:html{font-size:百分数}

       基数 = 百分数*16

       如：百分数为62.5% 基数 = 62.5*16= 10px = 1rem

c:将px换算成rem公式：px值/基数

       如：html的font-size =62.5%，则可以确定基数为10px，若给浏览器设置的字体为20px，换算成rem值为20/10 = 2rem。

例如：

<html style="font-size: 62.5%;">

    <body>

        <div style="font-size: 3rem;"></div><!--3rem=30px-->

</body>

</html>

注意：谷歌浏览器下小于12px的字体会失效，则最终显示默认字体大小为12px，但是在火狐浏览器下能够正常显示；

兼容性问题：IE6，7，8不支持em或rem，其他浏览器都支持。

四 响应式布局

表现：针对不同的屏幕分辨率设置不同的布局，同时每一种布局中用到流式布局，即页面大小会随着窗口大小的改变而自动适配，能使一个网站兼容多个终端。

特点：响应式布局跟自适应布局原理一样，都是检测设备，根据设备不同分辨率来设置不同的CSS样式，并且样式里面都采用的是百分比，而不是自适应布局里面的固定宽高。

html5中的几种布局简单比较的更多相关文章

  1. HTML的三种布局：DIV+CSS、FLEX、GRID

    Div+css布局 也就是盒子模型,有W3C盒子模型,IE盒子模型.盒子模型由四部分组成margin.border.padding.content. 怎么区别这两种模型呢,区别在于w3c中的width ...

  2. RecyclerView添加两种布局

    简介: 本篇博客主要介绍如何在RecyclerView中添加两种布局 思路:主要重写Recyclerview.Adapter中的一些方法 1.public int getItemViewType(in ...

  3. Vscode部分快捷键 Ps的简单使用 less中的除法问题 H5 四种布局

    vscode 部分快捷键 ctrl+/ 注释ctrl+回车 光标下移alt+shift+上下箭头 将本行代码向上或向下复制ul>li 自动写alt ,鼠标一直点,就会有很多光标,可以一起写ctr ...

  4. Delphi接口的底层实现（接口在内存中仍然有其布局，它依附在对象的内存空间中，有汇编解释）——接口的内存结构图，简单清楚，深刻 good

    引言 接口是面向对象程序语言中一个很重要的元素,它被描述为一组服务的集合,对于客户端来说,我们关心的只是提供的服务,而不必关心服务是如何实现的:对于服务端的类来说,如果它想实现某种服务,实现与该服务相 ...

  5. html5 中的 css样式单 的 两种调用方式的区别

    在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...

  6. SQL Server 中的6种事务隔离级别简单总结

    本文出处:http://www.cnblogs.com/wy123/p/7218316.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...

  7. HTML5中两种方法实现客户端存储数据

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  8. 简单谈谈Python中的几种常见的数据类型

    简单谈谈Python中的几种常见的数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等 ...

  9. HTML5 中 40 个最重要的技术点

    介绍 我是一个ASP.NET MVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性.所以以下40个重要的问题将帮助你复习HTML5相关的知识. 这些问题不是你得到工作的高效解决 ...

随机推荐

  1. Linux命令 umask

    umask: 文件预设权限 指定当前用户在创建文件或目录时的权限默认值. $ umask0002$ umask -Su=rwx,g=rwx,o=rx 创建文件时,预设没有x 权限,即只有rw 权限,最 ...

  2. Gym 101981J - Prime Game - [数学题][线性筛+分解质因数][2018-2019 ACM-ICPC Asia Nanjing Regional Contest Problem J]

    题目链接:http://codeforces.com/gym/101981/attachments 题意: 令 $mul(l,r) = \prod_{i=l}^{r}a_i$,且 $fac(l,r)$ ...

  3. Luogu 1031 - 均分纸牌 - [有意思的思维题]

    题目链接:https://www.luogu.org/problemnew/show/P1031 题目描述有 $N$ 堆纸牌,编号分别为 $1,2,…,N$.每堆上有若干张,但纸牌总数必为 $N$ 的 ...

  4. [No0000197]Windows用户都应该知道的运行命令

    通过"运行"命令,运行Windows丰富工具的方法.如果您知道工具或任务的相应"运行"命令,那么您就知道访问所述工具或任务的最快方法. 以下是我们最喜欢的Run ...

  5. python扫描端口脚本

    # -*- coding:utf8 -*- # # Python: 2.7.8 # Platform: Windows # Authro: wucl # Program: 端口扫描 # History ...

  6. SQL[Err]ORA-00932: inconsistent datatypes: expected NUMBER got CHAR:

    ORA-00932: inconsistent datatypes: expected NUMBER got CHAR: 获取的目标类型与源类型不一致,多出现在case when 语句中,when的结 ...

  7. webpack的externals的使用

    externals 官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD.AMD或者window/global全局的方式访问. ...

  8. 【English】【托业】【四六级】写译高频词汇

    大家都知道,四六级翻译每次考的话题不可能原句直接重复,但是,在研究了近几年的四六级真题后,我们惊奇地发现: 写译词汇在重复考! 写译词汇在重复考! 写译词汇在重复考! 因此,小编为大家整理了四六级写译 ...

  9. python基础之 异常处理和logging模块

    1.异常处理 l = ['apple','admin','kobe'] for id,item in enumerate(l,1): print(id,item) try: choose_id = i ...

  10. 安装和使用ZFS

    一.安装和使用ZFS Centos7上安装和使用ZFS:https://blog.csdn.net/linuxnews/article/details/51286358