响应式网站媒体查询

响应式网站开发是非常方便的，你只需要开发一套网站就能应用在PC端、平板、手机等不同屏幕尺寸的设备上。那我们到底是如何实现这种响应式的开发的呢？
实现响应式网站开发的关键技术就是CSS3中的@media查询，也叫媒体查询。其实现原理是通过@media设置不同的界值，当检测到屏幕尺寸进入到某个界值时，就启用某个界值所设置的css样式。就比如，我设置了0~380p，381px~768px,
769px~x三个界值，当屏幕尺寸大于768px时我设置的红色背景有效，背景显示红色；当屏幕小于768大于380时我设置的蓝色背景有效，背景显示蓝色；小于380时我设置的绿色背景有效，背景显示绿色；响应式网站的实现其实就是不同屏幕尺寸下应用不同ccs样式。