css3响应式布局教程—css3响应式

响应式布局

一个网站能够兼容多个终端，并且在各个终端都可以很好展示体验。

媒体类型

在何种设备或者软件上将页面打开

1 2 3 4 5 6 7 8 9

all：所有媒体 braille：盲文触觉设备 embossed：盲文打印机 print：手持设备 projection：打印机预览 screen：彩屏设备 speech：'听觉'类似的媒体类型 tty：不适用像素的设备 tv：电视

1 2 3 4 5 6 7 8 9 10 11 12 13

#box{width:100px;height:100px;background-color:red;} @media embossed{     /*盲文打印机是绿色*/     #box{background-color:green;} } @media tv{     /*在tv上是粉色*/     #box{background-color:pink;} } @media all{     /*在所有媒体上是红色*/     #box{background-color:red;} }

关键字

and：连接媒体类型和媒体特性

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@media all and (min-width:1201){  }         not：关键字是用来排除某种制定的媒体类型 @media not tv         only：只有在特定的某种设备上识别 @media only tv         媒体特性         min-width：当屏幕大小 大于等于 某个值的时候识别          max-width：当屏幕大小 小于等于 某个值的时候识别         orientation：横竖屏（portrait/landscape） @media (orientation:portrait) { //竖屏的时候     div{ background-color: yellow; } } @media (orientation:landscape) { //横屏的时候     div{ background-color: green; } }

竖屏/横屏检测的原理是通过可视区的宽度和高度之间的比例进行检测的。但在移动端中可能会出现问题，比如点击一个文本输入框的时候，会弹出键盘，这个键盘会影响屏幕可是区域的宽高，这种情况会造成竖屏/横屏检测错误。

样式引入方式

样式表末尾添加

1	@media all and (min-width:600px){  }

link标签

1	<link rel='stylesheet' href='css/01.css' media='all and (min-600px)'  />

写在样式表头部

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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>

https://www.w3.org/2010/05/video/mediaevents.html

常用的几种屏幕宽度设定：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@media screen and (min-width: 1200px) {     css-code; } @media screen and(min-width: 960px) and (max-width: 1199px) {     css-code; } @media screen and(min-width: 768px) and (max-width: 959px) {     css-code; } @media screen and(min-width: 480px) and (max-width: 767px) {     css-code; } @media screen and (max-width: 479px) {     css-code; }