响应式网站实现的原理

许多网站既可以在电脑端应用，又可以在移动端较好的适配，这就是利用了响应式布局。我来简单描述一下响应式布局实现的原理。

主要利用的是CSS3 媒体查询
即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。
在实际操作中，我们使用到的代码有：

	@media
	all 用于所有设备   
    print 用于打印机和打印预览。
    screen 用于电脑屏幕，平板电脑，智能手机等。
    speech 应用于屏幕阅读器等发声设备。
    orientation:portrait : 竖屏
	orientation:landscape : 横屏
	注：横竖屏操作，只是针对移动端的。在PC端屏幕永远是竖屏的

例如：

/* 逆战班 */
@media all and (min-width:500px){  
    #box{ background:blue;}

这段代码的含义当分辨率>=500px的时候，会识别大括号里面的代码

同样我们可以知道：

    @media all and (max-width:500px){  
        #box{ background:blue;}
    } 

这段代码的含义当分辨率<=500px的时候，会识别大括号里面的代码

而当我们使用外部引入css的时候，可在link标签上加这样的代码：

<link rel="stylesheet" href="./hello.css" media="all and (min-width:600px)">

利用media，再结合不同设备的分辨率，我们就可以制作出适合公司要求的响应式布局的网页了！