css3响应式布局教程—css3响应式 -云博客

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

# 前端 2024-05-05 05:38 0 44 来源：云博客

响应式布局

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

媒体类型

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

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