由于响应式网站的普及，许多建站朋友都想给自己的网站升级成响应式，但是却不知道从哪里下手修改，这里给大家说一个思路，使用@media screen属性，写两套css即可实现响应式网站，方便快捷。
我们首先需要了解@media screen是如何工作的？
总共有两种方式：
第一种方式：直接在link中判断设备的尺寸，然后引用不同的css文件：
<link rel="stylesheet" type="text/css" href="cssm.css" media="screen and (min-width: 400px)">
意思是当屏幕的宽度大于等于400px的时候，应用cssm.css
在media属性里:
screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于600小于800时，应用styleB.css
第二种方式：即是直接写在<style>标签里：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
.class {
background: #ccc;
｝
写法是前面加@media，其它跟link里的media属性相同。
其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。
