viewport 的设置，利用 Media Queries 的属性设置，你就可以做出响应式的 Web 页面。下面开始一步一步告诉你响应式 Web 设计怎么开始的：Р允许网页宽度自动调整：Р就是在网页的中追加 viewport meta 的定义。Р选取一个标准开发出具体页面：Р比如一个页面被要求对屏幕宽度为 320px、480px、640px 的三种场景下进行响应式设计， 这个时候正常会选取 320px 下的标准先进行页面开发。Р抽取最低标准下的 CSS 样式独立成外链样式文件：Р将 320px 下的 CSS 样式全部抽取成外链样式文件，响应式设计的页面 HTML 代码中， 不要有任何 CSS 定义的代码。Р根据 UEDMMs 的视觉稿进行其他标准的 CSS 样式文件开发。Р通过 Media Queries 属性设置来定义不同场景下加载不同的 CSS 样式文件。Р通过以上几步之后，OK，你的第一个响应式 Web 设计的页面就正式完成了，那么下面 就要开始测试了，当然你可以很老实的用每一种终端设备来进行测试，当然这个是有必要的， 但 是 为 了 马 上 就 能 看 到 响 应 式 设 计 的 效 果 ， 我 推 荐 一 个 工 具 （http://dfcb.github.io/Responsivator/）给你，试试吧，你会觉得很有快感的。Р为什么现在这么很多网站都选择响应式 Web 设计呢？主要优势个人感觉有以下几个方 面：Р给用户更好的视觉呈现：Р不同的屏幕下页面的呈现方式不一样，这样可以给不同终端的用户不同的视觉体验。 降低开发的成本：Р响应式 Web 设计相对于定制开发还是 APP 开发，无论是从开发资源投入、开发工时等 各个方面都节省了不少，正所谓省时省力省钱，何乐而不为呢？Р入口只有一个：Р不管你用什么终端访问网页，URL 都是一个。Р更多信息请查看 IT 技术专栏
全文预览
