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. windows下怎样测试oracle安装是否成功以及在oracle中创建用户并赋予用户权限；和[Err] ORA-65096: 公用用户名或角色名无效的解决方案

    测试oracle数据安装是否成功,可按顺序执行以下两个步骤: 测试步骤 1:请执行操作系统级的命令:tnsping orcl 上述命令假定全局数据库名是 orcl.以下是命令执行后的示例(请在cmd命 ...

  2. python学习之旅（四）

    Python基础知识(3):基本数据类型之数字 一.基本数据类型 数字Number.字符串String.列表List.元组Tuple.集合Set.字典Dictionary 二.数字 Python3支持 ...

  3. springboot+@async异步线程池的配置及应用

    示例: 1. 配置 @EnableAsync @Configuration public class TaskExecutorConfiguration { @Autowired private Ta ...

  4. c->log技巧

    介绍: 在C代码里,有时会加入一些打印信息方便分析问题,可用如下代码替代打印函数,更加方便. // // Created by lady on 18-12-10. // #include <st ...

  5. 11.1-uC/OS-III就绪列表

    准备好运行的任务被放到就绪列表中, 如图6-1.就绪列表是一个数组( OSRdyList[]),它一共有OS_CFG_PRIO_MAX条记录,记录的数据类型为OS_RDY_LIST(见OS.H).就绪 ...

  6. .net 调用python 实例

    如标题 ,python属于解释型语言,所以直接将python的文件copy到项目中 新建.net控制台应用程序,直接nuget  IronPython 安装成功后 在项目内新建Sum文件夹,将py.p ...

  7. java 和 c++ 实现的各种基础数据结构和算法

    https://github.com/phishman3579/java-algorithms-implementation https://github.com/xorz57/forest

  8. servlet-servlet的简单认识——源码解析

    Servlet的基本认识 本内容主要来源于<看透Spring MVC源码分析与实践——韩路彪>一书 Servlet是server+Applet的缩写,表示一个服务器的应用.Servlet其 ...

  9. 创建视图sql

    create   view   视图名称   as     查询sql语句create    view   test2         as      select   *  from   sc te ...

  10. solr6.5.1搜索引擎的部署

    目录结构如下: 6.5.1版本的solr已经集成有jetty服务器(在server目录下),所以可以直接启动solr应用. 1.java环境配置好(这里不再累赘). 2.打开cmd,路径切换到bin目 ...