CSS3学习（七）响应式布局基础

作用：为兼容不同尺寸的屏幕，动态修改尺寸

Flex box（弹性盒子属性）

一、概念了解
①弹性容器（flex container）
②弹性子元素（flex item）
③主轴（main axis，子元素排列方向）；侧轴（cross axis，垂直于主轴方向）
④主轴开始（main start）、结束；侧轴开始、结束

弹性容器属性，见图

弹性子元素属性，见图

Multi-column（多列属性）

多列属性，见图

Media Query（媒体查询分析）
一、响应式布局：针对不同的设备用的同一套网站，依据设备环境来显示不同布局
核心是：媒体查询，指获取用户设备环境，提供对应css规则
语法：
①在link元素中进行查询

<link rel="stylesheet" media="(max-width:800px)" href="xx.css"/>

②在样式表中的css媒体查询

<style> @media(max-width:600px){ .div{ display:none; } } </style>

③常见应用，见图

响应式表格

通常有两种响应式匹配方式：
①自动添加滚动条
②对表格进行折叠，即表头反转

响应式图片
实现方式：
①image的srcset 和 sizes 属性加载不同图片，举例，如图

②picture、source media 加载不同图片
③source type 指定多种图片格式
④最好的方式：polyfill-picturefill （能兼容浏览器，需要从外部加载js文件）

PS两个小知识点：

搜索测试浏览器对某些特性的支持情况：
http://www.caniuse.com
emmet简写方式：
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html
兼容问题的代码生成：
CodePen网站有一个内置功能可以实现

注：本文所有图片均截止极客学院HTML5视频教程，供学习查找备用。视频很好，向大家推荐