媒體查詢以及判斷屏幕寬高響應式相管處理

最近作了一個響應式項目，經歷了幾番周折已經接近尾聲。今天先總結一下項目中的3個問題。（響應式，媒體查詢，判斷屏幕）

1.響應式，首先引入bootstrap相關樣式，衆所周知下面的問題就是給html加類名了。

  響應式故名思議從大於1900到320都要顧及到。bootstrap柵格化系統，屏幕分紅12份，而後一部分佔多少（例如，在手機端佔屏幕1/3，類名就添加 .col-xs-4，（其中的4即是12乘以1/3）

首先最基本的就是知道類名對應，超小屏幕 手機 (<768px)加類名：.col-xs-；小屏幕 平板 (≥768px)加類名： .col-sm-;中等屏幕 桌面顯示器 (≥992px)加類名：.col-md-;大屏幕 大桌面顯示器 (≥1200px)加類名：.col-lg-;

其次，最基本的佈局沒有問題，而後就是給頁面添加padding調整設計圖的樣式。寬度用百分比實現更好。

2.媒體查詢，響應式必備。

手機端：（通常我會以480如下調整手機端）(通常就是大於某個尺寸，等於某個尺寸，小於某個尺寸。)

@media screen and (max-width:480px){
/*內容*/
}

@media screen and (width:414px){
/*這是調整inphone6plue*/
}

@media screen and (min-width:375px){
/*小於等於375px的樣式*/
}

pc端：直接寫樣式就能夠參照設計圖。

pc-手機端之間：

@media screen and (min-width:480px) and (max-width:1200px){
  /*內容*/
}

3.判斷屏幕添加效果採用jq/js(效果：當屏幕小於1200的時候爲非pc經常使用添加類名（我這裏是向上滑動而且顯示）)；當屏幕大於1200的時候爲pc端經常使用（滑到距離頂部100px的位置，添加類名,動態效果。）

var windowWidth = $(window).width();

if(windowWidth < 1200){

$(".xuanze-nr1").addClass("fadeInUp");

$(".xuanze-nr1").addClass("see");

}

if(windowWidth >= 1200){

window.onscroll = function () {

var scrollValue = $(window).scrollTop();

if (scrollValue > 100) {

$(".xuanze-nr1").addClass("fadeInUp");

$(".xuanze-nr1").addClass("see");

}

}

}

參考網址：待上線。