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-width: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 ; }