JQuery - 響應式設計（顯示）

我正在嘗試創建我的第一個RWD網站，但現在我已經開始編寫移動CSS了，我認爲它正確的時間詢問我的標題是否是正確的方式。JQuery - 響應式設計（顯示）

爲了讓窗口加載特定的.css文件（根據屏幕寬度桌面/平板電腦/手機），我在html中寫入了所需的所有媒體。

桌面和平板電腦在設計上非常相似。只有幾個div重排，它看起來不錯。但是當談到移動時，我想改變導航儀的外觀。例如在桌面的內聯塊中居中屏幕。但是在移動設備上，我想要一種新的設計，一個dropmenu可以說。

所以我雖然在html中創建了兩個導航器，並且在JQuery中編寫了一個代碼來檢查window.width。如果寬度將小於平板電腦window.width（這將是500px），然後添加display：none;到桌面導航器並刪除顯示：無;從移動導航器。

Q1：這是正確的做法嗎？在html中編碼div並使用JQ window.width添加/刪除顯示？或者，還有更好的方法？我試圖谷歌這個問題，但我無法找到一個直接的答案。

Q2：這是我的JQ代碼。雖然由於某種原因它不起作用，我是否在正確的道路上？

checkWidth(); 

    $(window).resize(checkWidth); 

    var $window = $(window); 


    function checkWidth() { 
     var windowsize = $window.width(); 
     if (windowsize < 500) { 
      alert("works"); 
     // $(".mobHome").removeClass("noShow"); 
     } else { 
$(".mobHome").addClass("noShow"); 
} 
    }

來源

2015-08-09 Metalbreath

這不是最好的方法。你應該在CSS的'@ media'查詢中處理它。所以實際上你應該使用JS來進行事件遍歷或者動畫，這些事情通常不會僅僅通過CSS來實現。除此之外的任何內容都應該由CSS定義。你不希望瀏覽器顯示一個元素，並且一旦JS解析文檔使其消失或者做任何其他核心內容。相反，隱藏 - 在CSS中顯示元素是即時的 - 用戶不會遭受奇怪的代碼行爲。 –

我明白了。我不知道該怎麼做。但我猜它是在這兩行之間：[code]'@media \t只有屏幕和（-webkit-min-device-pixel-ratio：2）， \t只有屏幕和（min-moz-device-pixel- （最小裝置像素比率：2），（僅最小裝置像素比率：2/1），僅屏幕和（（ - 最小裝置 - 像素比率：2/1），）最小分辨率：192dpi）， \t只有屏幕和（最小分辨率：2dppx） { \t的#header { \t \t背景圖像：網址（../images/banner_medium_2x.jpg）; \t \t \t } \t \t 的#header a.logo { \t \t \t 背景\t圖像：網址（../圖像/ logo_medium_2x.png）; \t \t \t \t } }'[/代碼] – Metalbreath

你只需要這在你的CSS

@media screen and (max-width:550px) { 
    .mobHome { display:block; } 
} 
@media screen and (min-width:551px) { 
    .mobHome { display:none; } 
}

來源

2015-08-09 11:08:51

他只需要這兩個中的一個 - 這取決於*移動第一*的方法。 –

那是對的，只是向他展示它如何完成 –

是的，這是有道理的。我知道我現在需要做什麼。我只是不知道如何繼續。不幸的是我不能投票您的評論呢。但每個人都有我需要學習的東西。謝謝大家:) – Metalbreath

我建議你看一看引導（http://getbootstrap.com/）這是一個CSS和JavaScript框架，移動第一種方法。

<div class="hidden-xs"> 
    This is not visible on small screens. 
</div> 
<div class="visible-xs-block"> 
    This is only visible on small screens. 
</div>

引導使用它來確定XS的尺寸，SM，MD，...

：

要顯示在引導你可以使用他們的響應公用事業（http://getbootstrap.com/css/#responsive-utilities-classes）例如刪除某個DIV

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... }

來源

2015-08-09 11:09:08 yeouuu

我讀過，引導程序很好用，只有當你想使用它的許多功能。否則它只會讓網站變得更重。雖然我想了解如何在某些時候使用它，因爲許多公司都需要它來僱用你 – Metalbreath

您可以自定義引導程序，並只使用您需要的部分。看看這個頁面：http://getbootstrap.com/customize/例如，你只能檢查網格系統。 – yeouuu

我會在幾天後回來。我想用bootstrap創建另一個網站。謝謝你讓我知道這是可能的。到目前爲止，我只對網格有所瞭解（我正在使用1200px.com） – Metalbreath

JQuery - 響應式設計（顯示）

回答

相關問題