响应式网站编写步骤 使用css3媒体查询

1.如果给电脑的CSS添加条件（media），那么在平板和手机上所有的样式都会消失，那么如果平板和手机上有和电脑上相同的样式也不能复用。

2.所以我们不要给电脑的css添加条件，这样无论浏览器的宽度是多少，电脑的CSS文件都会被执行，我们只需要在平板或者手机对应的CSS文件中通过相同的选择器覆盖掉不同的样式即可。

3.综上，可以降低代码的冗余。

4.企业开发中编写响应式网站的步骤

  4.1、编写电脑版本的网页

  4.2、编写平板版本的网页，通过相同的选择器覆盖掉不同的样式

  4.3、编写手机版本的网页，通过相同的选择器覆盖掉不同的样式

最终编写为：

<!--电脑的CSS-->

<link rel="stylesheet" href="css/index.css">

<!--平板的CSS-->

<link rel="stylesheet" href="css/index-pad.css" media="screen and (max-width:1199px)">

<!--手机的CSS-->

<link rel="stylesheet" href="css/index-phone.css" media="screen and (max-width:768px)">