移動優先，默認你是用手機瀏覽該網頁的，當你用pc瀏覽時，就會以min-width進行遞增式媒體查詢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wap {
font-size: 20px;
}
@media only screen and (min-width: 300px) {
.wap {
font-size: 40px;
}
}
@media only screen and (min-width: 700px) {
.wap {
font-size: 60px;
}
}
</style>
</head>
<body>
<p class="wap">移動優先</p>
</body>
</html>
pc優先與之相反，默認你是用pc瀏覽該網頁，當屏幕縮小時以max-width遞減式進行媒體查詢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.pc {
font-size: 60px;
}
@media only screen and (max-width: 700px) {
.pc {
font-size: 40px;
}
}
@media only screen and (max-width: 300px) {
.pc {
font-size: 20px;
}
}
</style>
</head>
<body>
<p class="pc">pc優先</p>
</body>
</html>