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

最近做了一个响应式项目&＃xff0c;经历了几番周折已经接近尾声。今天先总结一下项目中的3个问题。&＃xff08;响应式&＃xff0c;媒体查询&＃xff0c;判断屏幕&＃xff09;

1.响应式&＃xff0c;首先引入bootstrap相关样式&＃xff0c;众所周知下面的问题就是给html加类名了。

  响应式故名思议从大于1900到320都要顾及到。bootstrap栅格化系统&＃xff0c;屏幕分成12份&＃xff0c;然后一部分占多少&＃xff08;例如&＃xff0c;在手机端占屏幕1/3&＃xff0c;类名就添加 .col-xs-4&＃xff0c;&＃xff08;其中的4便是12乘以1/3&＃xff09;

首先最基本的就是知道类名对应&＃xff0c;超小屏幕 手机 (<768px)加类名&＃xff1a;.col-xs-&＃xff1b;小屏幕 平板 (≥768px)加类名&＃xff1a; .col-sm-;中等屏幕 桌面显示器 (≥992px)加类名&＃xff1a;.col-md-;大屏幕 大桌面显示器 (≥1200px)加类名&＃xff1a;.col-lg-;

其次&＃xff0c;最基本的布局没有问题&＃xff0c;然后就是给页面添加padding调整设计图的样式。宽度用百分比实现更好。

2.媒体查询&＃xff0c;响应式必备。

手机端&＃xff1a;&＃xff08;一般我会以480以下调整手机端&＃xff09;(一般就是大于某个尺寸&＃xff0c;等于某个尺寸&＃xff0c;小于某个尺寸。)

&＃64;media screen and (max-width:480px){
/*内容*/
}

&＃64;media screen and (width:414px){
/*这是调整inphone6plue*/
}

&＃64;media screen and (min-width:375px){
/*小于等于375px的样式*/
}

pc端&＃xff1a;直接写样式就可以参照设计图。

pc-手机端之间&＃xff1a;

&＃64;media screen and (min-width:480px) and (max-width:1200px){/*内容*/
}

3.判断屏幕添加效果采用jq/js(效果&＃xff1a;当屏幕小于1200的时候为非pc常用添加类名&＃xff08;我这里是向上滑动并且显示&＃xff09;)&＃xff1b;当屏幕大于1200的时候为pc端常用&＃xff08;滑到距离顶部100px的位置&＃xff0c;添加类名,动态效果。&＃xff09;

var windowWidth &＃61; $(window).width();

if(windowWidth <1200){

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

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

}

if(windowWidth >&＃61; 1200){

window.onscroll &＃61; function () {

var scrollValue &＃61; $(window).scrollTop();

if (scrollValue > 100) {

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

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

}

}

}

参考网址&＃xff1a;待上线。