静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容。针对不同分辨率的手机端,分别写不同的样式文件。例如:浏览器窗口是1000px,那么最小的宽度是900px或其他px,只要浏览器缩小过这个最小值就不会自动化的调整。
自适应布局:创建多个静态布局,每个静态布局对应一个屏幕分辨率范围,使用@media媒体查询技术。但是字体不会改变
流式布局:rem布局+viewport;元素的宽高用百分比做单位,元素宽高按屏幕分辨率调整,布局不发生变化。屏幕尺度跨度过大的情况下,页面不能正常显示。比如,对移动端来说不错
响应式布局:采用自适应布局和流式布局的综合方式,为不同屏幕分辨率范围创建流式布局。
弹性布局:要点在于使用em和rem单位来定义元素宽度,与流式布局有极大的相似性,但也有不同之处,主要区别在于弹性布局的尺寸主要根据字体大小而变化。
BFC:浏览器开发人员才回去研究,格式上下文,比如:解决了高度塌陷
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC的更多相关文章
- 弹性布局详解——5个div让你学会弹性布局
前 言 JRedu 在网页制作过程中,布局是我们最重要的一个环节.可以说布局的好坏直接影响到整个网页的成败!布局成,则事半功倍:布局败,则事倍功半. 随着移动互联的到来,响应式网站风靡.这也就兴 ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 什么是响应式编程——响应式Spring的道法术器
响应式编程之道 1.1 什么是响应式编程? 在开始讨论响应式编程(Reactive Programming)之前,先来看一个我们经常使用的一款堪称“响应式典范”的强大的生产力工具——电子表格. 举个简 ...
- 响应式web布局设计实战总结教程
响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...
- Power Apps 创建响应式布局
前言 我们都知道Power Apps作为低代码平台,最大的优势就是各个设备之间的兼容性,尤其是自带的响应式布局,非常好用. 这不,我们就为大家分享一下,如何使用Power Apps画布应用,创建响应式 ...
- 关于css3媒体查询和响应式布局
响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...
- HTML5 respond.js 解决IE6~8的响应式布局问题
HTML5 respond.js 解决IE6~8的响应式布局问题 响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
- CSS学习笔记——响应式布局
响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...
- CSS3–2.css3 响应式布局
1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...
- 响应式布局:Flexbox应用总结
距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...
随机推荐
- 【Java算法】求质数的算法
计算100以内的质数 1.质数:大于1的整数中,只能被自己和1整除的数为质数. 如果这个数,对比自己小1至2之间的数字,进行求余运算,结果都不等于0,则可以判断该数为质数. public class ...
- WINDOWS 端口查看
查看Windows下所有使用的端口 netstat -ano 查看Windows下某一个特定的端口 netstat -ano | find "8080" 查看windows下所 ...
- global 全局变量 nonlocal 局部变量
# x= # def func(): # x= # # func() # print(x) # x=[] # def func(): # x.append() # x.append() # x.app ...
- java高级⑴
1.之前我们学过 数组: 数组的特点: 01. 长度一旦被定义,不允许被改变 02. 在内存中开辟一连串连续的空间! 那么现在有一个需求: 让我们定义一个数组 来 保存 新闻信息!!! 问题: 01. ...
- 2.16 C++类与new和delete操作符
参考: http://www.weixueyuan.net/view/6347.html 总结: 当我们需要为类对象动态分配存储空间时,我们应该使用C++语言提供的new与new[]操作符,而不要使用 ...
- 删除掉str上下两行的空白字符(strip())
- python day05 作业答案
1. b.不可以 c.tu=("alex",[11,22,{"k1":"v1","k2":["age" ...
- 怪异盒模型和标准盒模型--CSS
一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...
- Linux shell脚本中shift
Linux shell脚本中shift的用法说明 shift命令用于对参数的移动(左移),通常用于在不知道传入参数个数的情况下依次遍历每个参数然后进行相应处理(常见于Linux中各种程序的启动脚本). ...
- Oracle client安装教程
一.下载 下载地址:http://download.csdn.net/detail/qq_35624642/9773986 这是Oracle Instant Client的CSDN下载地址. 要注意第 ...