有三种方式引入
<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>
标签:媒体,max,screen,min,查询,width,引用,media,375px
From: https://www.cnblogs.com/bingquan1/p/17608887.html