CSS3响应式布局 要点

最常见的办法就是基类（最常用的网站布局）+扩展类（几种不同的网站布局类）来实现不同的布局。

<!–-使用说明：网站基本布局，使用class="layout";使用ipad访问时，追加class="layout-ipad";使用iphone访问时，追加class="layout-iphone";使用iphone横屏访问时，追加class="layout-iphone-h";使用移动设备分辨率小于320px*480px访问时，追加class="layout-miscreen";–->

用一句话来说：
使用同一套Html代码来适配不同设备和满足不同场景不同用户使用。

关键专业术语：

Media Query（css3媒介查询）

语法结构及用法：

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

实际应用一 判断设备横竖屏：

/* 这是匹配横屏的状态，横屏时的css代码 */@media all and (orientation :landscape){}/* 这是匹配竖屏的状态，竖屏时的css代码 */@media all and (orientation :portrait){}实际应用二 判断设备类型：@media X and (min-width:200px){}X为设备类型》比如print/screen/TV等等实际应用三 判断设备宽高：/* 宽度大于600px小于960之间时，隐藏footer结构 */@media all and (min-height:640px) and (max-height:960px){     footer{display:none;}}

了解了这些，那么在国内到底有多少网站有应用到响应式布局呢？有一淘、淘宝、优酷等等。
国外响应式网站非常多了，个人亲身感受和熟悉的最典型网站就是WordPress系统了。