css响应式和css兼容性

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hopefullman/article/details/84142298

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