理解响应式网页设计中CSS和条件脚本的作用-优快云博客

本文链接：https://blog.youkuaiyun.com/u010818109/article/details/84424319

以下是一个简单的响应式页面的例子。但是一直不明白为什么css样式和

<!--[if lt IE 9]> 
	  <script type="text/javascript" src="css3-mediaqueries.js"></script>
    <![endif]-->

要写在head里，如果把css写成外部引用的，在ie8以下就不会支持，求解答


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>无标题文档</title>
    <!--<link rel="stylesheet" type="text/css" href="zishiying.css" />-->
     <!--[if lt IE 9]> 
	  <script type="text/javascript" src="css3-mediaqueries.js"></script>
    <![endif]-->
<style type="text/css">
.box{
  width:960px;
  margin:20px auto;
  border:1px solid #ddd;
  padding:5px;
}

.header{
  height:180px;
}

.sideleft{
  float:left;
  width:600px;
  background:#EBEBEB;
  margin:10px 0px;
  border:1px solid #ddd;
}
.sideright{
  float:right;
  width:300px;
  background:#EBEBEB;
  margin:10px 0px;
  border:1px solid #ddd;
}

.footer{
  clear:both;
  border:1px solid #ddd;
}

@media screen and (max-width: 980px){
  .box{
    width:94%;
  }

  .sideleft{
    width:65%;
  }

  .sideright{
    width:30%;
  }
}

@media screen and (max-width: 700px){
  .sideleft{
    width:auto;
	float:none;
  }
  .sideright{
    width:auto;
	float:none;
  }
}

@media screen and (max-width: 480px) {
  .header{
    height:auto;
  }

  .sideright{
    display:none;
  }
}


</style>   
  </head>

  <body>
    <div class="box">
      <div class="header">头</div>
      <div class="sideleft">
        <h1>标题</h1>
        <p>左内容</p>
        <p>左内容</p>
        <p>左内容</p>
        <p>左内容</p>
      </div>
      <div class="sideright">
        <h1>标题</h1>
        <p>右内容</p>
        <p>右内容</p>
        <p>右内容</p>
      </div>
      <div class="footer">底部</div>
    </div>

  </body>
</html>