响应式布局
一个网站能够兼容多个终端，并且在各个终端都可以很好展示体验。
媒体类型
在何种设备或者软件上将页面打开
|
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 ; } |