CSS 的規則是基於「後來者居上」的原則，
這意味著如果有多個相同規則（例如相同的選擇器），最後一個定義的規則將覆蓋之前的定義。
如果您的 @media 查詢涉及相同的 CSS 屬性，最後定義的規則會覆蓋先前的規則。
💥max-width: 767px 放在447px前面
/* 基本樣式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
font-size: 20px;
background-color: #f4f4f4;
}
/* 根據您的需求調整其他部分的樣式 */
@media screen and (max-width: 767px) {
/* 在螢幕寬度小於 767px 時使用以下 CSS 規則 */
body {
font-size: 16px;
background-color: #007bff;
}
}
@media screen and (max-width: 447px) {
/* 在螢幕寬度小於 447px 時使用以下 CSS 規則 */
body {
font-size: 16px;
background-color: #ffe600;
}
}
/*CSS 的規則是基於「後來者居上」的原則，
這意味著如果有多個相同規則（例如相同的選擇器），最後一個定義的規則將覆蓋之前的定義。*/
Rule1 :在螢幕寬度小於 767px 時，進入使用 CSS 規則，
Rule2 :在螢幕寬度小於 447px 時，進入使用 CSS 規則。
若現在有寬度為寬度700px的螢幕近來，
Rule1成功進去，Rule2進不去，
因此顯示max-width: 767px的CSS 規則。
若現在有寬度為寬度300px的螢幕近來，
Rule1成功進去，Rule2成功進去，
因此顯示max-width: 447px的CSS 規則。
💥max-width: 447px放在767px前面
/* 基本樣式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
font-size: 20px;
background-color: #f4f4f4;
}
/* 根據您的需求調整其他部分的樣式 */
@media screen and (max-width: 447px) {
/* 在螢幕寬度小於 447px 時使用以下 CSS 規則 */
body {
font-size: 16px;
background-color: #ffe600;
}
}
@media screen and (max-width: 767px) {
/* 在螢幕寬度小於 767px 時使用以下 CSS 規則 */
body {
font-size: 16px;
background-color: #007bff;
}
}
/*CSS 的規則是基於「後來者居上」的原則，
這意味著如果有多個相同規則（例如相同的選擇器），最後一個定義的規則將覆蓋之前的定義。*/
Rule1 :在螢幕寬度小於 447px 時，進入使用 CSS 規則，
Rule2 :在螢幕寬度小於 767px 時，進入使用 CSS 規則。
若現在有寬度為寬度700px的螢幕近來，
Rule1進不去，Rule2成功進去，
因此顯示max-width: 767px的CSS規則。
若現在有寬度為寬度300px的螢幕近來，
Rule1成功進去，Rule2成功進去，
因此顯示max-width: 767px的CSS規則。
>>所以你的RWD的功能就出不來了，max-width: 767px規則
覆蓋住max-width: 447px
補充:
Rule2 的background-color會把Rule1的覆蓋掉，
若Rule1有使用其他的CSS效果，且是Rule1沒有的，
此時，Rule1就不會被覆蓋掉。
>>當Rule1和Rule2有相同效果時，後來者會覆蓋過前者。
💥max-width: 447px和767px放在頂端
/* 根據您的需求調整其他部分的樣式 */
@media screen and (max-width: 447px) {
/* 在螢幕寬度小於 447px 時使用以下 CSS 規則 */
body {
font-size: 16px;
background-color: #ffe600;
}
}
@media screen and (max-width: 767px) {
/* 在螢幕寬度小於 767px 時使用以下 CSS 規則 */
body {
font-size: 16px;
background-color: #007bff;
}
}
/*CSS 的規則是基於「後來者居上」的原則，
這意味著如果有多個相同規則（例如相同的選擇器），最後一個定義的規則將覆蓋之前的定義。*/
/* 基本樣式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
font-size: 20px;
background-color: #f4f4f4;
}
Rule1 :在螢幕寬度小於 447px 時，進入使用 CSS 規則，
Rule2 :在螢幕寬度小於 767px 時，進入使用 CSS 規則。
Rule3 :進入body{}使用 CSS 規則。
若現在有寬度為寬度700px的螢幕近來，
Rule1進不去，Rule2成功進去，Rule3成功進去
因此顯示Rule3的CSS規則。
若現在有寬度為寬度300px的螢幕近來，
Rule1成功進去，Rule2成功進去，Rule3成功進去
因此顯示Rule3的CSS 規則。
>>所以你的RWD的功能就都出不來了，Rule3規則把其他都覆蓋住了
沒有留言:
張貼留言
喜歡我的文章嗎? 喜歡的話可以留言回應我喔! ^^