三种主要方式引入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;
}
网友评论