响应式:就是根据不同设备,或者设备不同分辨率,动态给出对应的样式变化
涉及到 css 中的 Media Queries ,这个词组被译为 “媒体查询”
1 | < link href = "css/main.css" rel = "stylesheet" type = "text/css" media = "screen" /> |
或者另外一种引入css 文件的方法
1 | < style type = "text/css" media = "screen" > |
2 | @import url("css/style.css"); |
3 | </ style > |
上面都直接在引用的 css 文件引用中使用 media 标识
通常来讲,media 是指设备类型 media_type 对应的有下面几种
所以,我们在上面的 style 文件中定义了 media_type="screen"
就是指当你的设备是 显示器,笔记本,移动端的时候,加载此 css 样式文件
在样式定义时,指定 Media type 类型
1 | @media screen and ( max-width : 1024px ){ |
2 | .background { |
3 | background : #fff ; |
4 | } |
5 | } |
上面的样式定义前使用 @media 属性来指定 media_type 是 screen
上面的示例 css 定义提到了 and (max-width:1024px)
是不是很神奇,没错 media 可以可以确定当前媒体环境的变化情况,根据你的媒体 宽度来动态加载不同的样式,达到响应式布局.
那么问题来了,如果根据不同的媒体 或者 媒体的不同分比率(水平宽度) 能不能加载不同的css 文件呢?
当然可以
我们可以这样引用 css 文件
1 | < link rel = "stylesheet" type = "text/css" href = "main.css" media = "screen and (min-width:800px)" /> |
上面的定义告诉我们,当媒体是 电脑,笔记本,移动设备屏幕时,并且水平宽度大于 800px 就加载使用 main.css 样式文件
not: 表示当前媒体排除指定的设备 @media not print
上面定义的样式排除打印机
only: 用来指定特定的设备 @media only screen
上面定义告诉我们这个样式 只支持 台式机,笔记本,移动设备屏幕