响应式web设计之学习总结

响应式设计可以概括为3个原则,

  1. 流布局

  2. 多媒体响应式

  3. 媒体查询

流布局

字体

使用单位来设置字体大小不外乎三种:px(像素)、em 和 百分比(%)。

px

优点

缺点

em

百分比

rem

小结

使用百分比来作body元素字体大小的单位,而以em作为其他元素的单位。

布局类型

避免使用固定宽度布局,相对而言,流体布局,弹性布局或者混合布局对响应式设计更为友好。

网格布局

优点

原理

目前最流行网格数是12,这里以12为例,在内容(画布)平均分为12列,按照比例来计算,每列约占1/12。然后再根据你的某块内容占用多少列,使用对应的类。例如ext2、ext3,ext4或ext5,分别代表占2、3、4或5列。

多媒体响应式

响应式图像

简单实践

Demo

但注意的,max-width属性在低于IE6版本(含IE6)中不支持的。

实质

在每种设备上最快地加载图片,而且图像质量没有因此过低或者过高,目的给予用户最佳用户体验。

媒体查询

viewport

设置viewport宽度为屏幕宽度如下:

<meta name="viewport" content="width=device-width">

上面是基本的配置,更多功能配置如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

建议

媒体查询中的值被表示为百分数,而不是像素,目的是使得各种页面元素保持弹性。例如:

@media screen and (max-width: 980px)
{
   #pagewrap
   {
  		width: 95%;
   }

   #content
   {
  		width: 60%;
  		padding: 3% 4%;
   }

   #sidebar
   {
  		width: 30%;
   }
}

兼容CSS3

CSS3,特别是媒体查询(media queries),在老版本浏览器中是不被支持的。因此需要使用JavaScript方案来使得在老版本浏览器支持CSS3。

有3种方案:

  1. Respond.js
  2. Modernizr
  3. adapt.960.js

如何使用,哪个最优?可阅读响应式web设计之浏览器兼容性

Spy 18 April 2014