CSS3_Media-Query 觀念

Posted on Edited on In

這一篇是關於「CSS3 Media-Query」的重要觀念

css順序：由小到大

會先寫手機的樣式，再寫平板，再寫pc–>解析度慢慢越來越寬

這樣讓大的解析度時，後面的樣式可以蓋掉前面的樣式

class 名稱，前後要一模一樣

注意！
@media 裡面的 class 名稱，要跟前面的 class 名稱「一模一樣」，否則會因為權重較低而無法覆蓋掉前面的樣式

例如

css（正確寫法）:

1
2
3
4
5
6
7
8
9
10
11
.header .box li a{

}

@media(min-width: 768px){

	// @media裡面的 class 名稱，要跟前面的一模一樣
	.header .box li a{

	}
}

css（錯誤寫法）:

  • @media裡面的 class 名稱沒有跟前面一樣，@media的權重較低，無法覆蓋前面的樣式
1
2
3
4
5
6
7
8
9
10
11
.header .box li a{

}

@media(min-width: 768px){

	// 少寫了.header，導致@media的權重較低
	.box li a{

	}
}

橫向裝置設定可以使用如下

https://developer.mozilla.org/zh-TW/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

Q&A

Q: 關於尺寸設定順序

老師最後有提到相反的順序設定，請問是怎麼做的呢~?因為如果照老師所講的，應該是：

是由大到小逐步覆蓋的。相反要怎麼做呢？下面的不是會優先覆蓋前面的嗎?

A:
用min-width可以解決

Q: 請教一下@media範圍設定

有些人只設定一個範圍，像是pc就設定768以上，平版 768 ，手機320。但有些是設定介於XX~XX之間的範圍，想請教老師哪種設定上會比較好？

A:
我的教法是逐步覆蓋，而你提的這個是範圍內容就吃該設定，其實都可以，只要你確保你都有兼顧到各種載具就 ok，如果一開始不熟，建議先依照我課程裡提供的斷點建議先寫出一個感覺，後面你就可以自己多方嘗試哩

Q: 可不可以使用BS4的框架以及部份自己寫的CSS，然後使用max-width  的邏輯去做RWD呢？

那我有疑慮的點是，因為我看BS4的官方文件的斷點是min-width ，所以我不確定我自己寫的CSS如果是用max-width去做RWD會不會有衝突，所以才向老師確認說如果要BS4混搭自己寫的CSS，那media query的設置是不是最好也跟著BS4?

A:
課程的安排是使用 max-width
是比較符合大多人的思考邏輯，學習上會比較順利但其實使用 min-width 開發是更好的主要是行動優先是主流的趨勢所以如果你學會了 min-width
就大可多利用 min-width 的方式去開發

混搭上就需要多了解 Bootstrap 的原始碼我是比較推薦都是配合 Bootstsrap 的邏輯去思考 (官方文件也有說明 max-width 是沒有問題的)
另外官方其實有提供 media query sass mixin 方法可以利用就是用來管理這些中斷點使用的相關運用可以參考以下連結：
https://bootstrap.hexschool.com/docs/4.1/layout/overview/#responsive-breakpoints