5. 特定方向样式
有时你可能需要依靠方向使用样式格式化你的内容，需要三个简单的步骤：
1. 在我们的标记中，给body单元添加一个类名(可以使用portrait和landscape)
2. 在我们的样式表中，为body.portrait和body.landscape指定不同的内容样式，以及需要它的子元素
3. 当方向变化时使用Javascript更新body单元的class属性的值
因此第一步是增加一个默认的类名，如：
body.portrait p {
color: red;
}
body.landscape p {
color: blue;
}
color: red;
}
body.landscape p {
color: blue;
}
然后添加样式：
body.portrait p {
color: red;
}
body.landscape p {
color: blue;
}
color: red;
}
body.landscape p {
color: blue;
}
最后是Javascript，我们需要使用：
1. 一个load事件监听器，设置最初的 类名
2. 一个orientationchange事件监听器
3. 一个发生orientationchange事件时交换类名的函数
我们来看看事件监听器：
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
下面是改变body单元上类名的setOrientation函数：
function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}
例8(链接：http://www.sitepoint.com/examples/iphone-development-12tips/orientation-styles.html)显示了这些特定方向的样式。使用iPhone浏览这个地址的效果如下图所示。
图 4 特定方向的样式
