今天小编跟大家讲解下有关css3响应式布局教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3响应式布局教程 的相关资料，希望小伙伴们看了有所帮助。
响应式布局一个网站能够兼容多个终端，并且在各个终端都可以很好展示体验。
媒体类型在何种设备或者软件上将页面打开
all：所有媒体braille：盲文触觉设备embossed：盲文打印机print：手持设备projection：打印机预览screen：彩屏设备speech：'听觉'类似的媒体类型tty：不适用像素的设备tv：电视css:
#box{width:100px;height:100px;background-color:red;[email protected] embossed{ #box{background-color:green;[email protected] tv{ #box{background-color:pink;[email protected] all{ #box{background-color:red;}}关键字and：连接媒体类型和媒体特性
@media all and (min-width:1201){ } not：[email protected] not tv only：[email protected] only tv 媒体特性 min-width：当屏幕大小 大于等于 某个值的时候识别 max-width：当屏幕大小 小于等于 某个值的时候识别 orientation：横竖屏（portrait/landscape）@media (orientation:portrait) { //竖屏的时候 div{ background-color: yellow; [email protected] (orientation:landscape) { //横屏的时候 div{ background-color: green; }}竖屏/横屏检测的原理是通过可视区的宽度和高度之间的比例进行检测的。但在移动端中可能会出现问题，比如点击一个文本输入框的时候，会弹出键盘，这个键盘会影响屏幕可是区域的宽高，这种情况会造成竖屏/横屏检测错误。
样式引入方式样式表末尾添加
@media all and (min-width:600px){ }link标签<link rel='stylesheet' href='http://www.aidi.net.cn/article/detial/6371/css/01.css' media='all and (min-width:600px)' />写在样式表头部<style> @import url(01.css) (min-width:400px); @import url(02.css) (min-width:600px); @import url(03.css) (min-width:800px); @import url(04.css) (min-width:1000px); body{ margin: 0; } div{ height: 100px; background-color: #f00; border: 1px solid #000; box-sizing: border-box; float: left; }</style>常用的几种屏幕宽度设定：@media screen and (min-width: 1200px) { css-code;[email protected] screen and(min-width: 960px) and (max-width: 1199px) { css-code;[email protected] screen and(min-width: 768px) and (max-width: 959px) { css-code;[email protected] screen and(min-width: 480px) and (max-width: 767px) { css-code;[email protected] screen and (max-width: 479px) { css-code;}来源：爱蒂网
