css響應式和css相容性
利用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');
})