响应式布局的几个实现原理实现!

简单来说响应式就是根据不同的宽度来调用css

1、简单的来说要共用电脑端css的话就是media 来就行了!

@media only screen and (max-width: 640px) {
html,body{max-width:640px; margin:0px auto;}
}

2、如果不共用css的话!就下面咯!

<link rel="stylesheet" type="text/css" href="../css/main.css" media="screen and (max-width:1200px)"/>
<link rel="stylesheet" type="text/css" href="../css/sj_main.css" media="screen and (min-width:1201px)"/>

3、如果你还要就用脚本咯!但是这个不是很适合你这种喜欢拖啊拖的了变得了!只有第一次生效!

 <link rel="stylesheet" type="text/css" id="links" href="../css/m_main.css"/>
        <script type="text/javascript">
            window.onload=function(){ 
                var sc=document.getElementById("links"); 
                    if(window.screen.width>1024) //获取屏幕的的宽度 
                    { 
                        sc.setAttribute("href","../css/main.css"); //电脑
                    } 
                    else{ 
                        sc.setAttribute("href","../css/m_main.css"); //手机
                    } 
            }
        </script>


写的好!

微信扫一扫赏大洋