20160104

响应式设计

为了适配移动端
有两种设计:

响应式设计( Responsive design)

  • 流式网格(Fluid Grids)
  • 流式图像(Fluid images)
  • 媒体查询(Media Queries)

自适应设计( Adaptive design)

  • 流式固定网格(Fluid-fixed Grids)
  • 流式固定图片(Fluid-fixed images)
  • 媒体查询(Media Queries)
  • 渐进增强(Progressive Enhancement)

响应式设计是自适应设计的一个子集。响应式设计通过html、css使页面在不同分辨率的设备下呈现良好的外观布局,且内容不会大幅度变动;自适应设计则是在响应式设计的基础上,利用javascript或服务器端技术,对页面呈现的内容进行优化,实现“渐进增强”的效果。

为了更好地使网页适配各种不同分辨率的设备,首先需要弄清楚两部分:

  • 移动Web的一些名词;

    1. 物理像素(device pixels):显示屏幕的最小物理单位,每个物理像素包含自己的颜色、亮度。
    2. CSS像素(CSS pixels):浏览器使用的抽象单位, 主要用来在网页上绘制内容。
    3. 设备像素比(device pixel ratio):物理像素与CSS像素的对应关系。

    三者的关系可以用以下公式表示:

    一定弄清楚,1个CSS像素并不一定对应1个屏幕的物理像素。CSS像素是一个抽象单位,它对应的物理像素的个数并不一定等于其本身的数值,这会在以下两种情况出现:

    1. 页面进行了缩放;
    2. 使用了视网膜屏。(devicePixels的像素点增加4倍,见子杰的ppt)
  • Viewport的概念以及与其相关的meta标签的使用。

理解viewport的概念,是使网页更好地适配各种不同分辨率设备的基础。
在PC端,Viewport指的是页面可视区的大小,等同于浏览器可视区的大小,如右图阴影部分
Alt text

而在移动端,viewport比较复杂。
需要弄清楚三个概念:visual viewportlayout viewportidea viewport
Visual viewport,指的是浏览器可视区的大小。见右图绿色框部分Alt text
layout viewport用于决定页面内容的布局及文本在何处换行,如左图橙色框部分。网页以layout viewport为基准进行渲染,网页超出layout viewport的部分需要通过滚动条查看。而layout viewport超过visual viewport的部分也需要通过滚动条查看。
通过document.documentElement.clientWidth获取
Alt text