如何不使用Bootstrap实现响应式

准备工作

当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到头部标签之间。这将设置屏幕按1:1的尺寸显示，在iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

代码的简单解释：
第一个meta
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 对应，指定高度。
initial-scale：初始缩放比，即是页面第一次加载时的缩放比例。
user-scalable：用户是否可以手动缩放
maximum-scale：允许用户缩放到的最大比例
第二个meta
主要用于加强代码对IE的兼容性，强制IE使用当前本地最新版标准模式渲染或者用chrome内核渲染。
第三个meta
针对手持设备优化，主要是针对一些老的不识别viewport的浏览器

语法结构及用法：

@media 设备名一 [ only （选取条件） not （选取条件） ] and（设备选取条件），设备二{sRules}

使用方式（要先进行四个判断）

实际应用一 判断设备横竖屏：

/* 这是匹配横屏的状态，横屏时的css代码 */
@media all and (orientation :landscape) {}
/* 这是匹配竖屏的状态，竖屏时的css代码 */
@media all and (orientation :portrait) {}

实际应用二 判断设备类型：

@media 设备类型 and (min-width:200px) {}
/* 常用设备类型 */all 所有设备，braille 盲文，embossed 盲文打印，handheld 手持设备，print 文档打印或打印预览模式，projection 项目演示幻灯，screen 彩色电脑屏幕，speech 演讲，tty 固定字母间距的网格的媒体，比如电传打字机，tv 电视。

实际应用三 判断设备宽高：

/* 宽度大于600px小于960之间时，隐藏footer结构 */
@media all and (min-height:640px) and (max-height:960px) {
	footer {display:none;}
} 

实际应用四 判断设备像素比：

/* 像素比为1时，头部颜色为绿色 */
.header { background:red; display:block;}
@media only screen and (-moz-min-device-pixel-ratio: 1), only screen and (-o-min-device-pixel-ratio: 1), only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio:1) {
	.header{background:green;} 
} 

使用范例

/*当屏幕的宽度大于600小于800时，应用styleB.css*/
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

/*当屏幕尺寸小于600px时，应用下面的CSS样式*/
@media screen and (max-width: 600px) {
.class { background: #ccc; } 
}

布局响应

@media screen and (min-width: 1060px) 
{
	#div1 { width:50%; }    
	#div2 { width:30%; }
	#div3 { width:20%; } 
 } 
@media screen and (max-width: 768px) 
{
	#div1 { width:100%; }    
	#div2 { width:100%; }  
	#div3 { width:100%; } 
}
@media screen and (min-width: 769px)  and (max-width: 1059px)  
{
	#div1 { width:100%; }     
	#div2 { width:60; } 
	#div3 { width:40; }
}

媒体响应

下面的 CSS 代码将确保图像将永远不会大于他们的父容器，代码非常简单，适用于大多数网站。请注意，IE6 等旧的浏览器不支持 max-width 指令。

img { width: auto; max-width: 100%; }

这个方法简单易行，但是最佳方法是针对不同的响应，设置不同的图像尺寸。

字体响应

大多数开发人员使用像素来定义字体的大小。虽然像素在普通网站使用是没问题的，但是对于响应式网站来说应该有响应式的字体。
CSS3 规范引入了一个新的单位叫 rem(font size of the root element)，和 em 类相似，但相对于 HTML 元素来说， rem 更易于使用。
使用如下：

@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (max-width:320px) { body {font-size:0.8rem;} }