静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容。针对不同分辨率的手机端,分别写不同的样式文件。例如:浏览器窗口是1000px,那么最小的宽度是900px或其他px,只要浏览器缩小过这个最小值就不会自动化的调整。

  自适应布局:创建多个静态布局,每个静态布局对应一个屏幕分辨率范围,使用@media媒体查询技术。但是字体不会改变

  流式布局:rem布局+viewport;元素的宽高用百分比做单位,元素宽高按屏幕分辨率调整,布局不发生变化。屏幕尺度跨度过大的情况下,页面不能正常显示。比如,对移动端来说不错

  响应式布局:采用自适应布局和流式布局的综合方式,为不同屏幕分辨率范围创建流式布局

  弹性布局:要点在于使用em和rem单位来定义元素宽度,与流式布局有极大的相似性,但也有不同之处,主要区别在于弹性布局的尺寸主要根据字体大小而变化。

BFC:浏览器开发人员才回去研究,格式上下文,比如:解决了高度塌陷

静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC的更多相关文章

  1. 弹性布局详解——5个div让你学会弹性布局

      前  言 JRedu 在网页制作过程中,布局是我们最重要的一个环节.可以说布局的好坏直接影响到整个网页的成败!布局成,则事半功倍:布局败,则事倍功半. 随着移动互联的到来,响应式网站风靡.这也就兴 ...

  2. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  3. 什么是响应式编程——响应式Spring的道法术器

    响应式编程之道 1.1 什么是响应式编程? 在开始讨论响应式编程(Reactive Programming)之前,先来看一个我们经常使用的一款堪称“响应式典范”的强大的生产力工具——电子表格. 举个简 ...

  4. 响应式web布局设计实战总结教程

    响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...

  5. Power Apps 创建响应式布局

    前言 我们都知道Power Apps作为低代码平台,最大的优势就是各个设备之间的兼容性,尤其是自带的响应式布局,非常好用. 这不,我们就为大家分享一下,如何使用Power Apps画布应用,创建响应式 ...

  6. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

  7. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  8. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  9. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  10. 响应式布局:Flexbox应用总结

    距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...

随机推荐

  1. shell 字符串判断

    字符串的判断 '-z 字符串' 判断字符串是否为空(为空返回真) '-n 字符串' 判断字符串是否为非空(非空返回真) '字符串1==字符串2' 判断字符串1是否和字符串2相等(相等返回真) '字符串 ...

  2. C++解析三

    类的构造函数类的构造函数是类的一种特殊的成员函数,它会在每次创建类的新对象时执行.构造函数的名称与类的名称是完全相同的,并且不会返回任何类型,也不会返回 void.构造函数可用于为某些成员变量设置初始 ...

  3. mysql不会使用索引,导致全表扫描情况

    不会使用索引,导致全表扫描情况 1.不要使用in操作符,这样数据库会进行全表扫描,推荐方案:在业务密集的SQL当中尽量不采用IN操作符 2.not in 使用not in也不会走索引推荐方案:用not ...

  4. U帮忙U盘启动盘制作

    第一步:制作U盘启动盘前的软.硬件准备 1.准备一个U盘或内存卡(尽量使用2G以上的) 2.进入 U帮忙官网 下载最新版U盘启动盘制作工具! 3.搜索并下载ghost版系统文件存放到电脑中. 第二步: ...

  5. It is never too late!

    整理着过去的学习笔记,零零碎碎的,偶尔夹杂着当时的心境. 泛泛的学着东西,不很系统,不很深入,倒像是在拾海,有时捡捡贝壳,有时抓抓螃蟹.叹服大海的神奇,还没来得及深钻某个领域. (以下内容写于2016 ...

  6. day28 黏包及黏包解决方案

    今日主要内容: 一 .缓冲区 二.两种黏包现象 三.黏包现象的两种解决方案 四.打印进度条(补充的,了解即可) 1. 缓冲区 缓冲区的作用 : 将程序和网络解耦(这样做的好处是程序不会以为网速的快慢而 ...

  7. JavaScrip(三)JavaScrip变量高级操作(字符串,数组,日期)

    一:字符串 charAt() 返回指定位置的字符 indexof() 返回指定字符串首次出现的位置 replace() 替换指定的字符 concat() 连接两个或多个字符串 substr(start ...

  8. 双引号与尖括号的区别 and 相对路径与绝对路径

    包含头文件的时候,如果包含的是自己写的头文件是用" " .如果是包含系统的头文件,一般用<>. 相对路径与绝对路径

  9. Iterator 与ListIterator的区别

    Iterator 与ListIterator的区别: 1.Iterator能够迭代Set和List集合的元素,而ListIterator只能迭代List集合的元素 2.Iterator只能前向迭代,L ...

  10. Thread.join方法的解析(转)

    原文链接:https://www.cnblogs.com/huangzejun/p/7908898.html 1. join() 的示例和作用 1.1 示例 1 // 父线程 2 public cla ...