防止使用CSS的默認值

我已使用以下CSS代碼（from SO）在safari（移動視圖）中顯示滾動條。防止使用CSS的默認值

.myScroll { 
    display: inline-block; 
    height: 100px; 
    overflow-y: scroll; 
} 

::-webkit-scrollbar { 
    -webkit-appearance: none; 
    width: 8px; 
} 

::-webkit-scrollbar-track { 
    background-color: rgba(240,240,240, .6); 
    border-radius: 8px; 
} 
::-webkit-scrollbar-thumb { 
    border-radius: 8px; 
    background-color: rgba(156, 156, 156, .6); 
} 

::-webkit-scrollbar{ 
    -webkit-appearance: initial; 
}

現在我想在桌面視圖中看到默認滾動條。我應該添加到我的桌面CSS代碼？

P.S.我不應該在CSS中使用媒體查詢。我已經有了不同分辨率的不同CSS文件。

來源

2014-01-09 Green Wizard

使用媒體查詢。 – Zlatan

我正在使用媒體查詢，但移動視圖的樣式也反映在桌面上。 :) –

所以你使用錯誤的媒體查詢。給我們整個來源。 – Zlatan

使用@media (max-width: 640px)或其他寬度值，並使用你的CSS裏面：

@media (max-width: 640px){ 
    your css code here 
}

注意：您還應該使用

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

來源

2014-01-09 14:20:11

謝謝，但很抱歉，我忘了提及。我不應該在CSS內使用媒體查詢。 –

@Wisam：那你爲什麼提到'我正在使用媒體查詢，但是移動視圖的樣式也反映在桌面上。 – NoobEditor

@Wisam實際上，你是 - 它是唯一可以使用它們的地方。 – Barney

由於您的要求是桌面，我建議使用媒體查詢，針對視口高度，因爲橫向模式方式會衝突iPad和筆記本電腦的寬度。

喜歡的東西：

@media screen and (min-width: 1024px) , screen and (min-height: 768px) { 
    /* styles here */ 
}

來源

2014-01-09 14:22:35 NoobEditor

你說«造型爲移動視圖桌面反映也。 :)»但這並不嚴格 - 人們在他們的媒體查詢中大多使用max-width或min-width聲明（這將根據瀏覽器視口大小而生效），但您也可以使用max-device-width和min-device-width。當您決定設備是桌面時仍然很困難：單靠媒體查詢無法告訴您設備是否便攜。但大小是戰鬥的一半：

@media (max-device-width: 640px /* or whatever you decide on */){ 
    /* fancy scrollbars */ 
}

來源

2014-01-09 14:23:56 Barney

防止使用CSS的默認值

回答

相關問題