html自适应布局,@media screen,媒体查询

2021-06-15 15:05

阅读:360

YPE html>

标签:链接   hone   firefox   文件   span   语句   mil   头部   不同   

html自适应布局,@media screen,媒体查询

自适应代码示例:





响应式布局

*{padding:0px; margin:0px; font-family:"微软雅黑";}
#header{height:100px; border:solid 1px red; margin:0px auto;}
#main{margin:10px auto; height:400px;}
#footer{margin:0px auto; height:100px; border:solid 1px red;}
/*屏幕宽度大于900的时候*/
@media screen and (min-width:900px){
#header,#footer{width:800px;}
#main{width:800px; height:400px;}
#main-left{width:200px; height:400px; border:solid 1px red; float:left;}
#main-center{width:394px; height:400px; border:solid 1px red; float:left;}
#main-right{width:200px; height:400px; border:solid 1px red;float:left;}
}
/*屏幕宽度大于600,小于900的时候*/
@media screen and (min-width:600px) and (max-width:900px){
#header,#footer{width:600px;}
#main{width:600px; height:400px;}
#main-left{width:200px; height:400px; border:solid 1px red; float:left;}
#main-center{width:396px; height:400px; border:solid 1px red; float:left;}
#main-right{display:none;}
}
/*屏幕宽度小于600的时候*/
@media screen and (max-width:600px){

#header,#footer{width:300px;}
#main{width:300px; height:400px;}
#main-left{display:none;}
#main-center{width:300px; height:400px; border:solid 1px red;}
#main-right{display:none;}
}





内容-左边

内容-中间

内容-右边




/*链接写法*/link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

 

1、在HTML头部增加viewport标签。

  在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:

  

  这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。

 

2、在CSS文件尾部增加针对不同屏幕分辨率的规则。

  例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog,WordPress相关标签名称只需修改一下即可。

@media screen and (max-device-width: 480px) {
  #divMain{
  float: none;
  width:auto;
  }
  #divSidebar {
  display:none;
  }
}

  3、布局宽度使用相对宽度。

  网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度,实际上更麻烦。

  4、页面使用相对字体(非必要)

  在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用 em = px/16 换算,例如16px就等于1em。

  5、图片自适应(非必要)

  img标签的话,只需要设置 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; }

  css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,添加如下语句:background-size:100% 100%;

html自适应布局,@media screen,媒体查询

标签:链接   hone   firefox   文件   span   语句   mil   头部   不同   

原文地址:http://www.cnblogs.com/fan-bk/p/7275288.html


评论


亲,登录后才可以留言!