响应式布局三部曲（viewport设置、页面布局、断点设置）

响应式

一套页面适配多个终端

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式实现三步曲

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)