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. Android开发入门经典【申明：来源于网络】

    Android开发入门经典[申明:来源于网络] 地址:http://wenku.baidu.com/view/6e7634050740be1e650e9a7b.html?re=view

  2. Chrome 调试技巧

    Chrome 调试技巧 1.alert 这个不用多说了,不言自明. 可参考:https://www.cnblogs.com/Michelle20180227/p/9110028.html 2.cons ...

  3. transition:all .2s

    all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样.

  4. join算法分析

    对于单条语句,explain看下key,加个索引 多个条件,加复合索引 where a = ? order by b 加(a,b)的复合索引 上面都是比较基本的,这篇我们分析一些复杂的情况--join ...

  5. GAN (Generative Adversarial Network)

    https://www.bilibili.com/video/av9770302/?p=15 前面说了auto-encoder,VAE可以用于生成 VAE的问题, AE的训练是让输入输出尽可能的接近, ...

  6. poj3278

    #include<iostream> #define MAX 100001 int john,cow; int queue[MAX]; int vis[MAX]; int ans; voi ...

  7. 解决docker镜像pull超时问题

    第一步:通过dig @114.114.114.114 registry-1.docker.io找到可用IP dig @114.114.114.114 registry-1.docker.io 第二步: ...

  8. python数据结构-如何统计序列中元素的频度

    如何统计序列中元素的频度 问题举例 如何找出随机序列[1, 5, 6, 5, 3, 2, 1, 0, 6, 1, 6]中出现频度最高的3个元素? 如何统计某篇英文文章中词频最高的5个单词? 将序列转换 ...

  9. Axure RP 8过期，用户名和序列号（注册码）

    用户名:axureuser 序列号:8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9IKu+kgKh79FL6IyPD6lK7G6+tqEV4LG 用户名:aaa注册码:2GQrt5 ...

  10. Software Testing 1 —— 有关编程错误的经历

    最令我印象深刻的程序错误几乎都是那些细节,具体的记不清了,因为真的很细.他们不会报正常的错,要么是时而可以正常运行,时而不能正常运行但是没有报错,比如闪退或者持续运行没有输出:要么是报的错误意义很宽泛 ...