引導3自定義CSS類取決於設備

Question

我需要設置一個div的高度，我想相對於設備屏幕設置它。

對於即：

/*Extra small devices Phones (<768px)*/ 
.myClass { height: 200px; } 

/*Small devices Tablets (≥768px)*/ 
.myClass { height: 400px; } 

/*Medium devices Desktops (≥992px)*/  
.myClass { height: 600px; } 

/*Large devices Desktops (≥1200px)*/ 
.myClass { height: 800px; } 

Answer 1

@media screen and (max-width: 768px){ 
    .myClass{ 
    height:200px; 
    } 
} 

Answer 2

看media queries。

@media (max-width: 768px) { 
    .myClass { 
    display: none; 
    } 
} 

@media (max-width: 992px) { 
    .myClass{ 
    display: none; 
    } 
} 

@media (max-width: 1200px) { 
    .myClass{ 
    display: block; 
    } 
} 

Answer 3

您還需要定義默認類，例如屏幕尺寸 - 大於1200像素

/*Extra small devices Phones (<768px)*/ 

@media only screen and (min-width:768px){ 
    .myClass { height: 200px; } 
} 

/*Small devices Tablets (≥768px)*/ 
@media only screen and (max-width:768px){ 
    .myClass { height: 400px; } 
} 
/*Medium devices Desktops (≥992px)*/  
@media only screen and (max-width:992px){ 
    .myClass { height: 600px; } 
} 
/*Large devices Desktops (≥1200px)*/ 
@media only screen and (max-width:1200px){ 
    .myClass { height: 800px; } 
} 

Answer 4

使用視口的寬度和高度聲明視meta標籤後：

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

您可以設置.myClass高度佔視口高度的百分比並擺脫媒體查詢，如下所示：

.myClass { height: 30vh; } 

Answer 5

編輯：改進示例CodePen。

我會從一個不同的角度加入它。通常情況下，您可能需要根據您的斷點在JS中執行不同的操作。爲此，我經常使用：

<div class="device-xs visible-xs"></div> 
<div class="device-sm visible-sm"></div> 
<div class="device-md visible-md"></div> 
<div class="device-lg visible-lg"></div> 

這4個div允許您檢查當前活動的斷點。對於一個簡單的JS檢測，可以有這樣一個一組4個功能：

function isMobile() { 
    return $('.device-xs').is(':visible'); 
} 

你的問題缺乏足夠的細節，我幫你更好，但如果你需要的東西不能簡單地實現定義在不同的媒體查詢元素的不同屬性，你可以指定某一類，在任何時候，通過：

if(isMobile()) { 
    $('.someClass').css('property', 'value'); 
} 

Answer 6

與響應的網頁，你只是讓內容調整自身，也將讓div的同一高度海誓山盟

一般當他們在同一行時。我假設你使用bootstrap，因爲它們具有相同的斷點。但是我不知道你正在嘗試解決的具體問題如下：

這種移動的第一種方法是不添加媒體查詢的最小斷點，因爲它是默認的。這將通過將高度設置爲800px來處理無限大的屏幕。

.myClass { 
      height: 200px; /*default extra small*/ 
      @media (min-width: 768px) /*small*/ 
        { 
        height: 400px; 
        } 
      @media (min-width: 992px) /*medium*/ 
        { 
        height: 600px; 
        } 
      @media (min-width: 1200px) /*large*/ 
        { 
        height: 800px; 
        }