1 CSS布局秘籍-任督二脉BFC/IFC( 二 ) _生活百科

文章插图
如上图，基于媒体查询和现代布局，响应式设计成为当下的主流。通过媒体查询测试，针对不同的尺寸适配不同的CSS样式、图片，如调整字体大小、段落填充、菜单按钮布局、以及增大触摸按钮的大小等，让网页能够自适应各种设备尺寸、设备类型。

响应式图形，创建多种尺寸版本文件，基于srcset、sizes，适配合适尺寸的文件。或者改用新的 <picture>元素。

<img srcset="elva-fairy-320w.jpg 320w,elva-fairy-480w.jpg 480w,elva-fairy-800w.jpg 800w"sizes="(max-width: 320px) 280px,(max-width: 480px) 440px,800px"src="https://www.huyubaike.com/biancheng/elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

响应式排版，传统方式可以结合vw单位（视口的1%）、固定尺寸rem、px单位，现在可以基于媒体查询设置不同样式规则。

.p1 {font-size: calc(1rem + 2vw);}@media screen and (min-width:1440px) {.p1 {font-size: 150%;}}

视口元标签，明确视口的宽度为设备的宽度，并初始化缩放比例为1，建议添加如下元素申明。

【1 CSS布局秘籍-任督二脉BFC/IFC】<meta name="viewport" content="width=device-width,initial-scale=1">
2.2、@媒体查询媒体查询是指针对不同的设备、特定的设备特征或者参数进行定制化的修改网站的样式，媒体查询的标准语法：

@mediamedia-typeand (media-feature-rule) {/* CSS规则 CSS rules go here */ } ??/* 注意关键字and后面的空格 */

属性描述值/备注@media媒体查询申明?media-type媒体类型- all：所有设备- screen：屏幕，常用- speech：语音合成器；print：打印，网页打印的时候?逻辑操作符（and）连接多个媒体查询语句- and：查询条件都满足的时候才生效- not：查询条件取反- only：整个查询匹配的时候才生效，常用语兼容旧浏览器，使用时候必须指定媒体类型- 逗号或者 or：查询条件满足一项即可匹配；?media-feature-rule媒体特征规则，一些条件表达式，常用尺寸判断- min-width：>=最小宽度；max-width：<=最大宽度- 更多媒体查询特征，如orientation（屏幕方向）@import导入外部css样式，支持媒体查询@import url(example.css) screen and (width:800px);

文章插图

/* 媒体查询：在大尺寸模式启用flex布局 ， 横向排列 */@media screen and (min-width: 40em) {.nav ul {display: flex;}.nav li {flex: 1;}}

响应式布局-代码示例（Codepen）
03、CSS的格式化上下文所有元素都是一个盒子Box，盒子Box是页面布局的基本单位，盒子的不同类型决定了他的布局方式。一个页面由各种盒子的组合、嵌套形成。这些盒子各不相同，有些是横排，有些竖排，有些是弹性，有些是网格，那他们是如何布局的呢？这就必须要了解的一个概念——格式化上下文。
格式化上下文（Formatting Contexts），就是把页面内容分为多个不同的格式化上下文（区域），每个格式化上下文都是一个独立的渲染（布局）区域，存放同类型的盒子。根据盒子的不同，格式化上下文分为多种（四种）类型，每种类型有自己的渲染规则，决定了其内部子元素的定位、排列方式。
格式化上下文简述BFC：块级格式化上下文Block fomatting context，由块级盒子组成的上下文区域，纵向排列。需要重点了解的，浮动float布局的各种坑就靠他来填了。IFC：内联级格式上下文Inline formatting context，内联格式上下文，就是横向布局的内联盒子，由内联盒子构成FFC：弹性盒格式化上下文Flexible Formatting Contex，就是flex布局的弹性盒子，申明flex（或inline-flex）布局就是创建了一个FFC弹性盒子格式上下文。GFC：网格格式化上下文Grids Formatting Context，就是grid（或inline-grid）布局的盒子，二维网格布局，使用很方便。不过由于兼容性问题（很多属性不支持IE），使用还不广泛，不过现代浏览器基本都支持了。实际上这些格式上下文也是相互嵌套的，各自负责各自区域进行渲染（布局）。