响应式
一套页面适配多个终端
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
响应式实现三步曲
1.viewport设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.页面布局（流式布局）
布局
- 无宽布局、百分比布局
- padding,margin四个方向都是相对于父元素的宽度进行计算
- 浮动、定位
- 弹性盒、弹性网格
- 小技巧
- calc( ) 计算函数
- box-sizing
- 显示隐藏（display:block,none）
图像内容
img
img{width:100%}
img{max-width:100%;}
背景图
background-size:100% auto;
background-size:auto 100%;
background-size:100% 100%;
文字内容
font-size
百分比 —— 相对于父元素的字号
em —— 用于字号时，相对于父元素font-size计算
rem --- 相对于html的font-size计算
line-height
百分比 ---- 相对于当前元素的font-size计算
数值 —— 相对于当前元素的字号
3.断点设置（版式发生变化临界点）
原理：媒体查询
断点参考
-
根据需求（设计稿）
-
参考bootstrap
超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)