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. win7 蓝屏信息获取和处理

    一.先说电脑蓝屏原因和解决方法: 1.驱动不对,驱动和硬件不兼容出现的问题,这个直接卸载软件或者重装驱动. 2.内存条有问题或者内存损坏:这个内存条很可能是没插紧,内存损坏的话,换个内存条. 3.病毒 ...

  2. 移动端如何用swiper实现导航栏效果

    在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...

  3. Python学习之旅（三十一）

    Python基础知识(30):图形界面(Ⅰ) Python支持多种图形界面的第三方库:Tk.wxWidgets.Qt.GTK等等 Tkinter可以满足基本的GUI程序的要求,此次以用Tkinter为 ...

  4. C++关于运算符重载知识点

    1) 除了类属关系运算符".".成员指针运算符".*".作用域运算符"::".sizeof运算符和三目运算符"?:"以外 ...

  5. 第k小整数

    题目描述: 现有n个正整数,n≤10000,要求出这n个正整数中的第k个最小整数(相同大小的整数只计算一次),k≤1000,正整数均小于30000. 输入: 第一行为n和k,第二行开始为n个正整数的值 ...

  6. Pycharm调试：进入调用函数后返回

    在菜单栏的view中勾选toolbar,然后点击工具栏中左箭头返回到调用函数处.

  7. 15.2-uC/OS-III资源管理（信号量）

    1.信号量 信号量是一个“ 锁定机构”,代码需要获得钥匙才可以访问共享资源.占用该资源的任务不再使用该资源并释放资源时,其它任务才能够访问这个资源. 通常有两种类型的信号量:二值信号量和多值信号量. ...

  8. VUE 全局变量的几种实现方式

    最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量. 1.全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好 ...

  9. Linux更新时，出现无法更新锁

    1.查看软件中心是否有更新 2.重启 3.rm/var/lib/dpkg/lock 4.sudo apt-get update 5.sudo dpkg --configure -a

  10. make pycaffe时候报错：Makefile:501: recipe for target 'python/caffe/_caffe.so' failed

    安装caffe-ssd编译环境的时候报错: python/caffe/_caffe.cpp:10:31: fatal error: numpy/arrayobject.h: No such file ...