引用媒体查询的多种方式
有三种方式引入
<link rel="stylesheet" media="screen and (max-width: 375px)" href="index.css"><style> @import "index.css" screen and (max-width: 375px), (min-width: 600px); </style><style> @media not screen and (max-width: 375px) {} </style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- <link rel="stylesheet" media="screen and (max-width: 375px)" href="index.css"> -->
<title>Document</title>
<style>
/* @import "index.css" screen and (max-width: 375px), (min-width: 600px); */
/* 大于300 小于375 */
/* @media screen and (max-width: 375px) and (min-width: 300px) {
html,body {
width: 100%;
height: 100%;
background: red !important;
}
} */
/* @media screen and (max-width: 375px), (min-width: 600px) {
html,body {
width: 100%;
height: 100%;
background: red !important;
}
} */
/* 除了屏幕小于375应用该样式 */
@media not screen and (max-width: 375px){
}
</style>
</head>
<body>
<script>
!function() {
console.log("ready")
}
</script>
</body>
</html>
本文作者：HuangBingQuan
本文链接：https://www.cnblogs.com/bingquan1/p/17608887.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步