3个步骤为网站添加响应式

手机，平板设备的暴增，直接促进了移动互联网的大潮来袭，互联网迎来了更多的变革，包括web前端行业也是， 现在变为移动web前端开发了，有多少人迎风倒下，又有多少人经受了这场革命的洗礼。这次教大家如何为自己网站添加响应式，快速抓住移动互联网用户。

流行的有某适配，如果你愿意每年支出高额的费用的话，这里介绍的是一个屌丝如何为网站添加响应式，响应式实现原理非常简单：就是通过css3 media query技术通过浏览器窗口宽度的判断，来调整合适的布局。

1，在网站head区间里面添加

<meta content="width=device-width,initial-scale=1" name="viewport">

2,在head区域添加

<link rel="stylesheet" href="css/responsive.css">，在目录下新建 responsive.css文件。

3，书写css代码

/*当宽度为640的时候的样式*/

@media only screen and (max-width:640px) {

}

/*当宽度为480的时候的样式*/

@media only screen and (max-width:480px) {

}

书写css代码需要你有一些css基础，可以上w3school学习下，切图网开发了一款用于快速响应式布局的css框架——快切，它包含了很多具有响应式的组件构成，基于它可以快速完成响应页面的搭建。

http://kuaiqie.qietu.com

如果你对web前端技术感兴趣，加我们微信：qietuwang