利用media来响应:
<link rel='stylesheet' type='text.css' href='css/index.css' media="only screen and (min-width:320px) and (max-width:1024px)">
利用mete标签来划分css兼容性:
<meta http-equiv="x-ua-compatible" content="ie=9,chrome=1"/>
<meta name="renderer" content="webkit">
<meta name='description' content='电气'/>
<meta name="keywords" content="电气"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
js响应式代码REM:
try{ | |
window.onresize = r; | |
function r(resizeNum) { | |
var winW = window.innerWidth; | |
document.getElementsByTagName("html")[0].style.fontSize = winW * 0.15625 + "px"; | |
if (winW > window.screen.width && resizeNum <= 10) { | |
setTimeout(function () { | |
r(++resizeNum); | |
}, 100); | |
} else { | |
document.getElementsByTagName("body")[0].style.opacity = 1; | |
} | |
}; | |
setTimeout(r(0), 100); | |
}catch(err){ | |
console.log(" ") | |
} |
获取body的字体大小:
($('body').css("fontSize"))
关于滚动:
$(window).scroll(function(){
var mtop=$(window).scrollTop()+300
// console.log(typeof(mtop))
$(".sidebar").css('top',mtop);
})
关于侧边导航条
//关于侧边导航点击效果
$(".header_btn").children("img").click(function(){
// $(window).scrollTop(3000);
$('html,body').animate({scrollTop:4800},'slow');
})
$(".sidebar").find("li").click(function(){
// $('html,body').animate({scrollTop:4800},'slow');
// var _text=$(this).text()
var _text=$(this).text();
switch(_text)
{
case "合作名校":
$('html,body').animate({scrollTop:1200},'slow');
break;
case "合作企业":
$('html,body').animate({scrollTop:2200},'slow');
break;
case "校招岗位":
$('html,body').animate({scrollTop:2800},'slow');
break;
case "热招地区":
$('html,body').animate({scrollTop:3800},'slow');
break;
default:
$('html,body').animate({scrollTop:4800},'slow');
break;
}
})
$(".sidebar").find("img").click(function(){
$('html,body').animate({scrollTop:0},'slow');
})