Bootstrap 3在移動設備和計算機上應用不同的CSS

我使用的是引導程序3，有div元素和classouter，並且想要在移動設備和計算機上應用不同的CSS。Bootstrap 3在移動設備和計算機上應用不同的CSS

例如，這是我的CSS代碼：

/* for computer */ 
div.outer { 
    height: calc(100vh - 80px); 
    padding: 0; 
    margin: 0; 
    min-height: 500px 
} 


/* for mobile */ 
div.outer { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
    padding: 0; 
}

如何實現呢？感謝您的任何建議。

來源

2016-04-29 Bangyou

你不想使用媒體查詢？ – mmativ

感謝您爲我工作的所有答案。抱歉，我無法接受所有答案，但只能選擇第一個答案。 – Bangyou

Use media query for mobile devices. below is template, dont forgot to add mobile meta tag. 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 570px) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    //your css for mobile is here 
}

來源

2016-04-29 02:38:43

對於手機，您可以在'@media'查詢中定義設備的寬度。

767px是移動設備和平板電腦屏幕的標準寬度。所以，你可以使用這樣

@media all and (max-width:768px){ 
    // your css for mobile 
}

這個CSS將僅適用於當您裝置的寬度將是768px以下

來源

2016-04-29 02:32:39

我會建議使用媒體查詢爲這一個。要在手機中更改div.outer類，請使用下面的代碼。

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
    div.outer { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
    padding: 0; 
} 
}

更多媒體查詢here

來源

2016-04-29 02:33:29 claudios

Bootstrap 3在移動設備和計算機上應用不同的CSS

回答

相關問題