iT邦幫忙

0

css scss @media 權重

請問@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%;
    }
}

2 個回答

0
小魚
iT邦好手 1 級 ‧ 2018-11-07 00:49:58
最佳解答

通常是要用 !important,
你那個可能是有用什麼套件框架,
(bootstrap之類的)
除非你要去改他原本的CSS內容,
不過如果其他專案有用到也會同時被改到,
通常這種情況我就直接 !important 解決掉他了...

不過如果在不同CSS裡面針對同一個控制項同一個屬性有多個 !important,
不同瀏覽器的處理方式會不大一樣,
我是都以Chrome為主...
Chrome是後面來的比較大.

看更多先前的回應...收起先前的回應...
小魚 iT邦好手 1 級 ‧ 2018-11-07 00:51:10 檢舉

不過你既然內容一樣為什麼還需要 @media ?

Zaku iT邦新手 4 級 ‧ 2018-11-07 10:18:09 檢舉

單純筆誤= =,我改一下。通常是要用 !important??通常?大大這樣不會有濫用的問題嗎,很難維護,不同瀏覽器判定又不同。目前是沒有套bootstrap跟其他的框架為前題的狀況

小魚 iT邦好手 1 級 ‧ 2018-11-07 11:59:45 檢舉

但是不套 !important 又不能用, 要不然你就要看是誰的優先權比他還大, 去改掉那個檔案吧...
另外如果你的階層比較明確通常會比較優先
譬如

table > tr > td.test

的優先權大於

.test
Zaku iT邦新手 4 級 ‧ 2018-11-07 13:42:52 檢舉

那可能真的是比較明確的差異因,我包的比較深一點,這樣包太深還會有這個問題..

1
法蘭克
iT邦新手 5 級 ‧ 2018-11-07 13:42:59

根據您的提問,我試了一下 "連結" ,發現是因為 @ 輸入成全型了,修改後是沒有問題的, 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 或是 響應式設計文章會對您有很大的幫助!

看更多先前的回應...收起先前的回應...
Zaku iT邦新手 4 級 ‧ 2018-11-07 13:45:19 檢舉

阿應該只是筆誤而已我本身的@應該是對的。對所以我盡量不使用!importent。可能我包太多層的關係。但權重優先權不好查出來,不會有提示,有推薦SCSS的架構文章嗎

法蘭克 iT邦新手 5 級 ‧ 2018-11-07 13:49:44 檢舉

使用 scss 開發響應式可以參考這篇文章,連結,速度和維護上會快速很多.

Zaku iT邦新手 4 級 ‧ 2018-11-07 13:52:33 檢舉

喔喔!!!所以是寫一小塊一小塊在朝狀裡面,我之前以為這樣會有問題,就統一寫在正下方,就變很冗長,現在內部正下方應該就好很多,不用複製一大堆結構,感恩大大

法蘭克 iT邦新手 5 級 ‧ 2018-11-07 14:34:12 檢舉

:D

我要發表回答

立即登入回答