請問@media有權重之類的問題嗎？架設如下
.main {
.a-component {
width:20%;
}
}
＠media (max-width: 664px){
.main {
.a-component {
width:100%;
}
}
}
從chrome的開發工具看小魚664px時事可以看到＠media的屬性有出現，但width:100%被槓掉了，有時候會發生這種問題，但又不想一直用!imponent去蓋掉。
還有scss多層結構好像也會有影響，若＠media下沒有包.main{}有時也不行，這樣好像變得有點攏長，如果結構多層的時候
＠media (max-width: 664px){
.a-component {
width:100%;
}
}
已邀請的邦友 {{ invite_list.length }}/5
通常是要用 !important,
你那個可能是有用什麼套件框架,
(bootstrap之類的)
除非你要去改他原本的CSS內容,
不過如果其他專案有用到也會同時被改到,
通常這種情況我就直接 !important 解決掉他了...
不過如果在不同CSS裡面針對同一個控制項同一個屬性有多個 !important,
不同瀏覽器的處理方式會不大一樣,
我是都以Chrome為主...
Chrome是後面來的比較大.
根據您的提問，我試了一下 "連結" ，發現是因為 @ 輸入成全型了，修改後是沒有問題的， css 檔案在讀取樣式是從上到下，因此會先執行這一區塊
.main {
.a-component {
width:20%;
background-color: pink;
}
}
接續再執行第二區塊
@media (max-width: 664px) {
.main {
.a-component {
width:100%;
}
}
}
而兩個區塊都是針對"父樣式中的子樣式"做寬度修改，所以權重上是一樣的，但是因為第二區塊寫在下方所以會進行覆蓋(條件: 視窗寬度 <= 664px)，這樣的寫法形式是常見的做法，第一段先寫出所有視窗寬度下的樣式，第二區塊、第三區塊在依序寫 Media Query．
省思：若你把第一區塊和第二區塊對調，那第一塊將完全被覆蓋，永遠執行不到了．
另外建議您在撰寫 css 時，不要為了省一時的方便而使用!important 強制覆蓋原先的樣式，對於後續開發維護不管是對自己或是別人都是一場惡夢，撰寫 css 遇到困難或解不開先打開 dev-tool 去觀察找出問題，一定有辦法解決，而設計架構上多去看看 scss 或是 響應式設計文章會對您有很大的幫助！
使用 scss 開發響應式可以參考這篇文章，連結，速度和維護上會快速很多．
喔喔!!!所以是寫一小塊一小塊在朝狀裡面，我之前以為這樣會有問題，就統一寫在正下方，就變很冗長，現在內部正下方應該就好很多，不用複製一大堆結構，感恩大大
:D
iThome鐵人賽
看影片追技術