静态布局:给页面元素设置固定的宽度和高度,单位用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. laravel5.2 开发中打印sql语句

    在 AppServiceProvider 的boot方法中写入 use DB;use Event; if ( env('APP_ENV') == 'dev' ) { DB::connection()- ...

  2. 微信公众号 access_token 没有过期 却失效

    最近在开发微信项目的时候 access_token   缓存到 redis里面的,明明在两个小时的有效期内  微信却提示 "errcode":40001,"errmsg& ...

  3. Uboot中汇编指令

    LDR(load register)指令将内存内容加载入通用寄存器 ARM是RISC结构,数据从内存到CPU之间的移动只能通过L/S指令来完成,也就是ldr/str指令.比如想把数据从内存中某处读取到 ...

  4. Java中的 JDK下载和环境配置(方式一)

    第一步:需要安装JDK. JDK下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151 ...

  5. ural1297

    题解: 后缀数组 st表处理加速lcp 把串后面加一个不可能出现的字符 然后再把串倒过来放在后面 暴力枚举中心 判断lcp 代码: #include<bits/stdc++.h> usin ...

  6. Oracle数据库备份策略:全备与增量备份

    一.RMAN全备份 在数据量比较小.或者数据库服务器性能很强大的情况下,可以每天进行一次全备份. 全被策略如下 1.crontab定时任务,避开业务繁忙时段 ##################### ...

  7. FIFO的使用总结

    使用FIFO积累 FIFO是在FPGA设计中使用的非常频繁,也是影响FPGA设计代码稳定性以及效率等得关键因素.我总结一下我在使用FIFO过程中的一些心得,与大家分享.         我本人是做有线 ...

  8. <Spark><Programming><RDDs>

    Introduction to Core Spark Concepts driver program: 在集群上启动一系列的并行操作 包含应用的main函数,定义集群上的分布式数据集,操作数据集 通过 ...

  9. L275 Climate Change Is Having a Major Impact on Global Health

    Climate Change Is Having a Major Impact on Global Health A devastating heat wave swept across Europe ...

  10. ob_gzhandler — ob_start callback function to gzip output buffer

    <?php ob_start("ob_gzhandler"); ?><html><body><p>This should be a  ...