媒体查询以及判断屏幕宽高响应式相管处理

最近作了一个响应式项目，经历了几番周折已经接近尾声。今天先总结一下项目中的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");

}

}

}

参考网址：待上线。