响应式页面

liuyt611

浏览: 26458 次
性别:
来自: 北京

最近访客更多访客>>

ppyyll7788

LTao5461218

自由翱翔的鱼

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

日常积累

以下是一个简单的响应式页面的例子。但是一直不明白为什么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>

分享到：

解决ie6下png格式的兼容 | 同一行图片和文字垂直居中以及图片和文字间 ...

2013-04-27 17:57
浏览 624
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

响应式页面

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

响应式页面

评论

发表评论

相关推荐

录屏软件

switch 语句

常用编辑器

sublime text3 安装及快捷键--ruby环境安装

远程关机

向上/向下 取整

jquery获取焦点后光标在字符串后

解除绑定

sass 学习

sublime 安装插件

sass 考拉的安装

轻量级图形报表工具JSCharts (JSChart)，内置函数中文参考

AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

各种小例子

网页在线验证工具

通配符*的使用

添加到收藏夹

ie中改变滚动条的样式（overflow-y:auto）

css自动换行 ie6 css强制换行 white-space:nowrap

如何使浮动的元素居中

最近访客更多访客>>

向上/向下取整