当创建一个有响应性的网站，或者让一个已有的网站有响应性时，首先要注意元素的布局。当我建立一个响应性网站时，我总是创建一个固定页面宽度的非响应性布局。如果非响应版本做得很好，我会添加媒体查询和响应代码。这种操作模式更容易实现响应，同时专注于一项任务。

当你完成了无响应的网站后，首先要做的就是在你的HTML页面的head和/head标签之间粘贴下面的代码。这将设置屏幕以1: 1的大小显示，在iPhone和其他智能手机的浏览器中提供网站的全视图浏览，并禁止用户缩放页面。

1 . meta name=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1，user-scaled=no '

2 . meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 '

3 . meta name=' HandheldFriendly ' content=' true '

根据W3C网站，媒体查询由媒体类型和零个或多个媒体查询的条件表达式组成。通过使用媒体查询，外观呈现可以针对特定范围内的输出设备，而不改变内容本身。换句话说，媒体查询让你的网站在各种显示器上，从小型智能手机到大型电脑屏幕上都很好看。

媒体查询取决于你的网站布局，所以我给你提供一个现成的代码片段有点困难。但是，下面的代码对于大多数网站来说是一个很好的起点。在这个例子中，#primary是主要内容区域，#secondary是侧边栏。

从代码中可以看出，我定义了两个规范：，有一个更大宽度为1060px的水平显示器，是为平板电脑优化的。#primary占其父容器宽度的67%，#senondary占30%，加上左边距的3%。第二个规格是平板电脑和更小的屏幕尺寸。

因为智能手机屏幕尺寸小，我决定把#primary的宽度设为，把#secondary的宽度设为，会在#primary下面。如我所说，您可能需要修改该代码位，以满足您网站的特定需求。

1./*平板电脑风景*/

2.@媒体屏幕和(更大宽度： 1060px) {

3.#主{ width :67%；}

4.#次要{ width :30%；左边距：3%；}

5.}

6./*展示肖像*/

7.@媒体屏幕和(更大宽度： 768px) {

8.# primary { width :；}

9.#次要{ width :；margin:0border:none}