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');
})