响应式 Web 设计 -- HTML5 和 CSS3 实践指南

第1章 响应式元素及媒介

简介

主要介绍几个方法来构建你自己的响应式元素和媒介。

图像缩放

通过 html 缩小图像，图片像素不会减少，通过工具缩小图片则会失真。
1. 基于百分比 max-width:100%
2. 利用 cookie 传送屏幕大小决定后台传送图片的大小。
3. 基于媒介查询 @media

视频缩放

1. html5
   类似于 基于百分比设置图像缩放 max-width:100%
2. object
3. iframe

基于媒介查询的动态导航栏

@media screen and ( max-width:800px ) {    .small=menu { display:inline; }    .large-menu { display:none; }}

基于尺寸的响应式边距

通过内边距除以总屏幕宽度得到响应式百分比。
padding:4%;

基于 css3 动画的按钮

背景： -webkit-gradient -webkit-linear-gradient
jQuery 动画：$('.class').animate
阴影： -webkit-box-shadow

第2章 响应式字体

简介

主要介绍怎样创建响应式字体和美化字体。涉及 html5 画布元素和 css3 的知识。 ps 和 fireworks 在缩小图片后还可以进一步优化大小。

响应式字体

rem

@media screen and (orientation:portrait) {    p.a{font-size:3rem;}}@media screen and (orientation:landscape) {    p.a{font-size:1rem;}}

使用画布实现文字阴影、内侧，外侧阴影、旋转文本

画布无法直接实现内侧阴影效果，使用 stroke 方法可模拟内侧阴影。

使用 css3 旋转文本、制作 3D 文本、文本遮罩的文本纹理

旋转文本：-webkit-transform
3D文本：

text-shadow: 0px 0px 0px #666,             -1px -1px 0px #666,             -2px -2px 0px #666,             ...

文本遮罩的文本纹理：-webkit-mask-image

基于位置的伪类

li:nth-of-type(odd){    background:red;    color:white;}

h1:before{    content:"#";}

为字体添加阴影效果

text-shadow
dropshadow

圆角边框半径

border-radius

第3章 响应式布局

布局方式

• 基于 min-width 和 max-width
• 基于相对内边距 .comment {padding:0 0 0 10%}

<div class="comment">    <div class="comment">    </div></div>

• 基于媒介查询 @media、@media print、@media screen and、@media tv

第4章 使用响应式框架

将静态框架改造成响应式框架步骤：

使用属性选择器将一成不变的有限列宽变成横跨整个屏幕宽度的列宽。再结合自定义媒介查询，适配小的屏幕，就可得到响应式框架。

响应式 960 框架

bootstrap 框架

第5章 设计移动设备优先的Web应用

帮助插件

• user-agent switcher for chrome
• whatsmyuseragent.com
• window resizer
• jQuery mobile

通过媒介查询设置移动版本的样式表

<link rel='stylesheet' media='screen and (max-device-width:320px)' href='mobile.css' />

仅为移动设备添加 JavaScript 功能特效

$(document).ready(function(){    if(window.screen.width < 800){        $.getScript('http://www.qianjin.com/jquery.min.js');    }});

第6章 优化响应式内容

第7章 非侵入式JavaScrip

将展示层与逻辑控制层分离，使构建的网站更有灵活性。