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

自适应代码示例：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>响应式布局</title>

<style type="text/css"> 

*{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;}

}

</style>

</head>

<body>

<div id="header">头部</div>

<div id="main">

<div id="main-left">内容-左边</div>

<div id="main-center">内容-中间</div>

<div id="main-right">内容-右边</div>

</div>

<div id="footer">底部</div>

</body>

</html>

　　

/*外链接写法*/<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标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：

　　<meta name="viewport" content="width=device-width, initial-scale=1" />

　　这段代码支持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，媒体查询的更多相关文章

  1. @media screen媒体查询实现页面自适应布局

    @media screen and (min-width:1200px){ //大于等于1200px才会进入 }   @media screen and (max-width:375px) { //小 ...

  2. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  3. CSS3 之 Media（媒体查询器）

    1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...

  4. 实现网页布局的自适应 利用@media screen

    利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...

  5. media queries 媒体查询使用

    media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...

  6. bootstrap_响应式布局简介_媒体查询_媒体选择器_2x3x图

    响应式布局 在不同设备上,同一网页根据设备特性(显示屏大小,分辨率)呈现不同的布局样式. 思考: 获取设备相关信息 将屏幕划分为几个区域 给需要变化的结构写多套 css 样式 媒体查询 常用写法 @m ...

  7. 移动端开发rem布局之less+媒体查询布局的原理步骤和心得

    rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...

  8. Media Queries 媒体查询常见设备断点

    按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...

  9. Media Queries 媒体查询

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  10. media query媒体查询

    媒体查询(CSS3 media query) 一.逻辑操作符:not.and.only not:not操作符用来对一条媒体查询的结果取反. and:and操作符用来把多个媒体属性组合起来,合并到同一条 ...

随机推荐

  1. Java HashMap两种遍历方式

    第一种: Map map = new HashMap(); Iterator iter = map.entrySet().iterator(); while (iter.hasNext()) { Ma ...

  2. nstall neovim on Ubuntu 16.04

    https://neovim.io/ To install NeoVim on Ubuntu, run 1 2 3 sudo add-apt-repository ppa:neovim-ppa/sta ...

  3. debug-stripped.ap_' specified for property 'resourceFile' does not exist.（转载）

    1.错误描述 更新Android Studio到2.0版本后,出现了编译失败的问题,我clean project然后重新编译还是出现抑郁的问题,问题具体描述如下所示: Error:A problem ...

  4. MVC001之权限校验

    参考网址:http://bbs.csdn.net/topics/370002739 http://blog.csdn.net/chenloveyue/article/details/7095522 h ...

  5. Java的反射和代理以及注解

    最近接触到java的反射和代理(接触的有点迟了...),还是有必要总结下 1. Java的反射 有的时候我们需要在程序运行的时候获取类.方法等信息用于动态运行,这个时候反射就能够帮我们找到类.方法.成 ...

  6. css写三角形

    #triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 5 ...

  7. 二叉树的创建、遍历(递归和非递归实现）、交换左右子数、求高度(c++实现)

    要求:以左右孩子表示法实现链式方式存储的二叉树(lson—rson),以菜单方式设计并完成功能任务:建立并存储树.输出前序遍历结果.输出中序遍历结果.输出后序遍历结果.交换左右子树.统计高度,其中对于 ...

  8. 如何使用eclipse搭建maven环境以及常见的错误

    这篇博客适合零基础学习maven,搭建maven以及运行项目,常见的错误,我会在结尾写出说明白,看是否和大家的错误一样,或者文章的括号注释部分也会写出一些注意点. 第一步:就是下载maven,以及配置 ...

  9. LibreOJ 6277 数列分块入门 1(分块)

    题解:感谢hzwer学长和loj让本蒟蒻能够找到如此合适的入门题做. 这是一道非常标准的分块模板题,本来用打标记的线段树不知道要写多少行,但是分块只有这么几行,极其高妙. 代码如下: #include ...

  10. 【英宝通Unity4.0公开课学习 】（一）资源管理

    经过多次面试后发现自己对Unity3D的框架缺乏一个整体的认识. 而前面由于离职等原因总是忙于修修补补,疲于奔命,感觉相当疲惫. 还好,后来经过调整,开始淡定了起来.得特别感谢一本书哇:<高效人 ...