静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、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~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...
随机推荐
- VMware workstation 14 Pro下载、安装及激活码
虚拟机安装 1.百度搜索VMware应用程序 2.功能介绍 3.下载完成 4.开始安装 双击应用程序开始安装 5.点击“下一步” 6.勾选“我接受” 选择“下一步” 7.安装文件的选择:1.默认安装路 ...
- System.properties
win: len:54java.runtime.name=Java(TM) SE Runtime Environment sun.boot.library.path=D:\Java\jdk1.8. ...
- java⑩
1.for循环: for循环语法 for(表达式1;表达式2;表达式3){ 循环体4} 表达式1:初始化变量 只执行一次!表达式2:循环条件 满足条件进入循环体4表达式3:迭代变量 如果循环体 中只有 ...
- javascript es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
- 如何使用VSTO自动将Excel中的图表复制到Word
如何使用VSTO自动将Excel中的图表复制到Word 原文地址:https://code.msdn.microsoft.com/How-to-copy-Chart-in-Excel-a29f9029 ...
- Express工作原理和源码分析一:创建路由
Express是一基于Node的一个框架,用来快速创建Web服务的一个工具,为什么要使用Express呢,因为创建Web服务如果从Node开始有很多繁琐的工作要做,而Express为你解放了很多工作, ...
- Centos7单主机部署 LAMP + phpmyadmin 服务
LAMP -> centos + apache + mysql + php + phpmyadmin 一:搭建yum仓库: 安装utils: yum -y install yum-utils c ...
- IDEA中maven的依赖jar包报红
问题描述: 查看本地的repository中有相关的jar包,但是在IDEA中就是报红(下面红色波浪线) 解决方法: 将pom.xml中相关的dependcy配置注释掉,maven中jar包就会删除. ...
- window.setTimeout和window.setInterval的区别,及用其中一个方法记录时间。
window.setTimeout(语句,时间)是在多久之后执行语句,语句只执行一次. window.setInterval(语句,时间)是每隔多久执行一次语句,语句循环执行. <!DOCTYP ...
- Python实现登陆的功能
import datetimetoday=datetime.datetime.today()# 获取当前时间for i in range(3): username=input("请输入用户名 ...