三種主要方式引入media query
link方法引入(不同的媒體設備，引入不同的CSS樣式表)
語法結構：<link rel="stylesheet" type="text/css" href="../css/print.css" media="print and (max-width:768px)" />
代碼演示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link media="screen and (min-width:992px) and (orientation : landscape)" rel="stylesheet" href="css/screen_pc.css"/>
<link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/screen_pad.css"/>
<link media="screen and (max-width:767px)" rel="stylesheet" href="css/screen_phone.css"/>
</head>
<body>
<div class="box">
<h1>使用媒體查詢技術</h1>
<h3>根據屏幕的不同寬度執行不同的CSS文件</h3>
</div>
</body>
</html>在<head></head>中的<style>...</style>中調用(類似于內部樣式表)
代碼演示：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>自適應</title>
<style>
div{
background: #ff7e59;
height: 200px;
}
@media screen and (max-width: 399px) {
div{
width: 100px;
}
</style>
</head>
<body>
<div></div>
</body>外部樣式文件中引入media，然后在HTML中引入這個樣式表
HTML部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/6.css"/>
</head>
CSS部分：
/PC屏幕專用樣式/
@media screen and (min-width: 992px){
.container {
width: 970px;
margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 991px){
.container {
width: 750px;
margin: 0 auto;
}
