DOM的分度，自動寬度

Question

假設我創建一個div命名。主要-NAV

我風格的段落標題是這樣的：

.main-nav{ 
    width: auto; 
} 

內DIV還有另一個名爲＃導航欄品牌DIV

#navbar-brand​{ 
    padding:15; 
}​​ 

如果我想要做的，當主導航的寬度大於768px則＃導航欄品牌填充走了更長的時間，應該怎樣做一個DOM ???

Answer 1

這當然是有JavaScript，但更有效地當視大小超過768px做純CSS media queries。請注意，媒體查詢方法假定.main-nav寬度爲視口寬度的100％（如果.main-nav的父容器小於視口，則此方法不一定如您所料地工作）

後默認的導航欄＃牌的設置插入這對你的CSS文件

@media screen and (min-width: 768px) { 
#navbar-brand​{ 
    padding: 0; 
}​​ 
} 

你也將需要中繼檢視 - 標籤添加到您的頁面，它與視口大小正常工作，閱讀更多here 。

Answer 2

你可以做到這一點使用CSS媒體查詢，如下圖所示：

@media screen and (min-width: 768px) { 
    #navbar-brand { 
     padding: 0; 
    } 
} 

Answer 3

試試這個，但總是創建一個你已經完成你的代碼的小提琴或張貼你的整個代碼在這裏。

CSS

.main-nav{ 
     width:auto; 
     background:#111; 
    } 

#navbar-brand{ 
    padding:15px; 
    background:#f22; 
} 

JS

$(document).ready(function(){ 
    $(window).resize(function(){ 
    var wdth = $(".main-nav").width(); 
    if(wdth >= "768"){ 
    $("#navbar-brand").css('padding','0'); 
    } 
    else{ 
    $("#navbar-brand").css('padding','15px'); 
    } 
}); 
}); 

Answer 4

。主要-NAV是塊元素，從而佔據整個屏幕全寬。 添加寬度：自動可能沒有什麼。

其子＃導航欄品牌也是其中有15 填充塊元素（您忘記單位有）。

你想要做一個DOM （這很含糊，讓聲明更清楚！）

但是，如果嘗試使用JS做的DOM操作，

1. 你必須附加處理的東西一樣大小調整事件（這可能是大多數移動瀏覽器不具備）
2. 或者使用的setInterval進行檢查，並在完成後取消，或乾脆調用一個函數來 檢查時，DOM已準備就緒或頁面加載

或者

SUPER簡單的方式

如果只是改變的CSS屬性然後使用媒體查詢（見MDN）。