快速学习响应式开发

响应式网站

弹性网格、布局弹性图片、媒体查询等多项技术的综合

设计原则

• 渐进增强（progressive enhancement） 优雅降级（graceful degradation）

• 大屏幕（最好选择chrome、firefox调试） 小屏幕(最好选择AndroidBrowser、Safari优先支持)（根据个人习惯、设备用户人数等选择）

• 设备大小包含的内容是否应该相同（产品经理决定）

• 断点的选择

  推荐做法

  小屏幕0-480、中屏481-800、大屏幕801-1400、巨屏幕1400+

  不太推荐的做法

  /* -------- iPhone 4 and 4S------- */
      /* portrait and landscape */
      @media only screen 
        and (min-device-width: 320px)
        and (max-device-width: 480px)
        and (-webkit-min-device-pixel-ratio: 2){
  
        }
      /* -------- iPhone 5 and 5S------- */
      /* portrait and landscape */
      @media only screen
      and (min-device-width: 320px)
      and (max-device-width: 568px)
      and (-webkit-min-device-pixel-ratio: 2){
  
      }
  

媒体查询

CSS2：

<link rel="stylesheet" href="site.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

CSS3

<style>
    @media all and (min-width: 800px) and (orientation: landscape){
      ......
    }
  </style>

1、媒体类型

• all用于所有媒体
• screen用于屏幕
• print用于打印
• 默认不写为all（若使用ont only等操作符，那么媒体类型不能省略）

2、操作符

• and链接

• ，分割符等同于or

• not 不选择，排除

• only :

  仅仅，只有

  防止老旧浏览器，不支持媒体属性的查询而应用到给定的样式

  only最好不要省略

3、视口宽度VS设备宽度

只有PC的时候视口就是浏览器主窗口的区域但是到了手机浏览器这时候有三个视口概念

• 布局视口 ：先有一个虚拟的960的宽度把网页布局出来

• 可视视口：网页在手机上呈现出来的区域宽度，用户的缩放会改变可视视口的大小，但不敢布局视口的大小

• 理想视口：布局视口在一个设备上的最佳尺寸(viewport)

  <!-- 告诉手机使用理想视口，这个理想视口宽度等于布局视口的宽度（设备宽度）最小最大缩放比例均为1，禁止用户缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable">
  

4、媒体属性

常用：可加前缀 min- 或 max-

• width: 视口宽度

• height: 视口高度

• device-width: 渲染表面的宽度，就是设备屏幕的宽度

• device-height: 渲染表面的高度，就是设备屏幕的宽高度

• orientation : 检查屏幕处于横向还是纵向

• aspect-ratio : 基于宽度和高度的宽高比，width/height ->16/9 ，4/3

• device-aspect-ratio : 渲染表面的宽度，就是设备屏幕的宽度

• color: 每种颜色的位数bits 如：min-color：16位，8位

• resolution : 检测屏幕或者打印机的分辨率 如：min-resolutiion: 300dpi

px、em、rem

当 font-size : 62.5%时 1 rem=10 px

em : 相对的长度单位

• em 相对的参照物为父元素的 font-size
• 具有继承的特点（若父元素没有设置font-size，则继续向上找）
• 若没有设置font-size时，则使用默认em设置：1 em = 16 px

缺点

因为继承父元素的font-size，所以容易造成混乱

rem ： 相对的长度单位

• 参照物为根元素的html
• 参照物不变化，便于计算和使用
• 没有设置时，1 rem=1 em=16 px

清除浮动

推荐方式：

1、给父元素增加class

.clearfix:after{
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* 兼容IE6 IE7  zoom：1； 触发haslayout属性 */
.clearfix{
    zoom: 1;
}

改写：

.clearfix:after{
    content: '';
    display: table;
    clear: both;
}

也可（增加before以解决margin塌陷）：

.clear-fix:before,
.clear-fix:after{
  content: '';
  display: table;
}

.clear-fix:after{
  clear: both;
}

不推荐方式：

2、加div

<div style="clear:both"></div>

3、加overflow

overflow:auto;
overflow:hidden;

4、让父元素也浮动

响应式图片

<picture>
  <source srcset="mdn-logo-l.png" media="(min-width: 50em)">
  <source srcset="mdn-logo-m.png" media="(min-width: 30em)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml">
  <img src="mdn-logo.png" alt="MDN">
</picture>