响应式web设计

响应式web设计
理念：基于流动布局、弹性图片、弹性表格、弹性视频和媒体查询等技术组合。使用百分比布局创建流动的弹性界面，同时利用媒体查询来限制元素的动态范围。
视口有两种：
1.可见视口（即设备大小→屏幕分辨率）
2.视窗视口（网页宽度→网页制作的原始大小）
例如：
打开一个网页，设备屏幕是414px的宽度，在浏览器中，414px的屏幕宽度能够展示1200px宽度的内容。那么414px就是可见视口宽度，1200px就是视窗视口宽度。
user-scalable=no:用于设置用户是否可以缩放，默认为yes
idth=device-width:用于设置视窗视口宽度，此表示与可见视口宽度相同
initial-scale：用户设置初始缩放比例，取值为0-10.0
maximum-scale：最大缩放比例
之外，还可以设置height属性设置视窗视口宽度，minimum-scale设置最小缩放比例

百分比布局
固定布局（以像素为单位）可以换算Wie百分比宽度，来实现百分比布局
换算公式：目标元素宽度/父盒子宽度=百分数宽度
弹性盒布局
弹性盒（改进了块模型，既不是用浮动，也不会在弹性盒容器与其内容之间合并外边距，是一种非常灵活的布局方法）：
容器
子元素
轴
display
用于指定弹性盒的容器，取值可以为flex;若为行内元素，值为inline-flex