本文介绍了响应式设计中媒体查询的三种应用方法：通过Link标签引入外部CSS，使用@import导入文件，以及直接在style标签内编写媒体查询。详细展示了不同宽度条件下的CSS样式，包括背景颜色、布局调整等，以适应不同设备屏幕尺寸。
方法一：利用Link标签从外部引入文件 <link rel='stylesheet' media='screen and (min-width:1000px)' href='./css/over1000.css'>
方法二：用import导入文件：@import url('style.css') only screen and (min-width: 500px);
方法三：直接写在style标签内
@media screen and (min-width: 800px){
//CSS
}
/* 复杂媒体查询 */
@media screen and (min-width: 700px) and (max-width: 800px){
//CSS
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel='stylesheet' media='screen and (min-width:1000px)' href='./css/over1000.css'> -->
<meta http-equiv="X-UA-Compatible" content="
最低0.47元/天 解锁文章
扫一扫
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
