現代網頁設計和效果？

Question

我發現這個模板： http://preview.premium-contao-themes.com/quantumflat/demo/blog.html 現在我想知道，當我向下滾動，導航調整和固定住宿，我該怎麼做。

當我調整瀏覽器的大小時，內容區域中的框也在調整大小和重新排列，我該怎麼做？

在此先感謝

Answer 1

我相信你明白響應式網頁設計（RWD）是。

當我向下滾動時，導航調整和保持固定，我該怎麼做。

基本上這裏發生的是當你滾動超出標題的位置時，類'stickyHeader'被添加到#header元素。下面的CSS應用於則：

#header.stickyheader { 
     position: fixed; 
     left: 0; 
     top: 0; 
     width: 100%; 
    } 

這是怎麼發生這種情況：

// sticky header 
var headerHeight = jQuery('header').height(); 
var stickyHeaderTop = jQuery('header').offset().top; 
var stickyHeaderNav = function(){ 
    var scrollTop = jQuery(window).scrollTop(); 
    var windowWidth = jQuery(window).width(); 

    if (windowWidth > 990) { 

     if (scrollTop > stickyHeaderTop) { 
      jQuery('header').addClass('stickyheader'); 
      jQuery('#wrapper').css('padding-top', headerHeight); 
      jQuery('#top').addClass('stickyheader'); 

     } else { 
      jQuery('header').removeClass('stickyheader'); 
      jQuery('#top').removeClass('stickyheader'); 
      jQuery('#wrapper').css('padding-top', 0); 
     } 
    } 

} 

stickyHeaderNav(); 

jQuery(window).scroll(function() { 
    stickyHeaderNav(); 
}); 

jQuery(window).resize(function() { 
    stickyHeaderNav(); 
}); 

當我調整瀏覽器，在內容區域的框大小調整和reanranging以及， 我怎樣才能做到這一點？

如果你檢查，你可以清楚地看到，每個箱子都給了'one_third'和'塊'類。然後他們繼續在css中添加下面的代碼：

.block.one_third { 
     width: 33.3333%; 
    } 

這意味着這些盒子只佔屏幕的33.3333％。在某些情況下，如果設備的寬度太小而無法分成3列，那麼這些框的寬度將爲100％。您可以將其稱爲中斷點。

你可以閱讀更多的自適應設計，在這裏Responsive design