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. 学习完HTML后的5大测试题----9.18

    考试题目   第一题: 布局出该效果 提示:使用DIV的border样式,调整边框粗细出现该效果,保留上边框,其它三个方向的边框需设置:border-left:100px solid transpar ...

  2. php中，echo,print,var_dump的三个区别

    1.echo语句 echo - 能够输出一个以上的字符串 <?php      echo "<h2>www.dc3688.com</h2>";     ...

  3. myEclipse导入现成项目出现错误 【申明来源于网络】

    myEclipse导入现成项目出现错误 [申明来源于网络] 原地址:http://blog.sina.com.cn/s/blog_6d7703400100znh6.html file–>impo ...

  4. Nginx之使用nginx搭建简单的文件服务器

    使用nginx可以搭建简单文件服务器 安装nginx(不详述) 修改配置文件 /usr/local/nginx/conf/nginx.conf user root; /usr/local/nginx/ ...

  5. Git服务器配置和基本使用

    #git服务器搭建 1. 在系统中增加git用户 useradd -s /usr/bin/git-shell git 2. 在git用户的home目录下新建.ssh目录,做好相关配置 1)生成公私匙: ...

  6. python使用MySQLdb实现连接数据库Mysql

    python实现连接数据库mysql的步骤: 一.引入MySQLdb 二.获取与数据库的连接 三.执行SQL语句和存储过程 四.关闭数据库连接 1.什么是MySQLdb? MySQLdb是用于pyth ...

  7. [js]es6语法: 字符串和数组的方法

    s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...

  8. swagger：API在线文档自动生成框架

    传统的API从开发测试开始我们经常借用类似Postman.fiddle等等去做接口测试等等工具:Swagger 为API的在线测试.在线文档提供了一个新的简便的解决方案: NET 使用Swagger ...

  9. python 判断两个ip是不是处于同一网段

    a_ip:10.10.15.100b_ip:10.10.15.101c_ip:10.10.10.100netmask:255.255.255.0 def numtobinary(num): binar ...

  10. 今天整理了一下Winform用的UI插件信息

    平时主要用了一下几个比较好的UI控件: 1:IrisSkin2 皮肤插件.这是一款与编程开发相关的素材资源,主要是提供一些采用IrisSkin2.dll控件进行软件窗口换肤的素材文件,包括一些GIF图 ...