使用CSS媒体查询创建响应式布局教程
作者：佚名
字体：[ ] 来源：互联网 时间：03-29 14:59:43
下面小编就为大家带来一篇使用CSS媒体查询创建响应式布局教程。小编觉得挺不错的，现在分享给大家，也给大家个参考。一起跟随小编过来看看吧
现如今在Web前端领域，BootStrap是一个最流行的UI库，其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式。
追究Bootstrap的内在原理，其实就是通过媒体查询来完成对不同屏幕大小、不同分辨率、不同设备导致的不同场景下的Css样式的选择。今天我就对媒体查询这一工具或者说方法来进行一个总结。
从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。
1、如何使用媒体查询：
&rel=&stylesheet&&type=&text/css&&href=&site.css&&media=&screen&&&&
&rel=&stylesheet&&type=&text/css&&href=&print.css&&media=&print&&&&
以上的两句引入Css样式表的语句，比一般的Css引入语句就多了一个关键字&media&，media 属性定义了应该用于指定每种媒体类型的样式表：
&screen 适用于计算机彩色屏幕。&print 适用于打印预览模式下查看的内容或者打印机打印的内容。*这里是将media属性放在了Css引入的语句中，所以在以下查询语句中就可以省略screen或者print。
2、一般的媒体查询语法：
@media&&media&type&&condition&{/*CSS样式表*/}其中&@media&也可以有另一中写法，&media=&； &&
&media type&是应用媒体查询的媒体类型，例如&all&，意思是所有媒体都使用接下来的css样式表；或者&(min-width:800px)&，意思是屏幕最小宽度为800px时使用接下来的CSS样式表，如果屏幕宽度大于800px则不会应用此CSS。
也就是说，媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。通过评估条件的真假，如果改条件为true则应用Css，否则不应用。
由此我们可以扩展出很多的媒体查询类型。
3、在Css的媒体查询中，可以使用三种逻辑运算，也即&and&，&or&，&not&，意思我当然不用解释。举几个例子一眼就明白了：
@media&(min-width:800px)&{&...&} &&
@media&(min-width:800px)&and&(max-width:1200px)&{&...&} &&
@media&(min-width:800px)&and&(max-width:1200px)&and&(orientation:portrait)&{&...&} &&
@media&(min-width:800px)&or&(orientation:portrait)&{&...&} &&
@media&(not&min-width:800px)&{&...&}&&
4、宽度和高度非常相似，所以二者的条件可以在一起使用：
@media (min-width:800px) and (min-height:400px) { ... }orientation查询：
@media (orientation:portrait) { ... }不带max-或min-的查询，当然这种查询的的可用性不是很大：
@media (width:800px) and (height:400px) { ... }
5、常见媒体查询
因为 Apple 首次向市场推出了用户智能手机和平板电脑产品，所以下列大多数媒体查询都是基于这些型号的设备。
如果目标是横向模式智能手机，则使用： @media (min-width: 321px) { ... }
如果目标是纵向模式智能手机，则使用： @media (max-width: 320px) { ... }
如果目标是横向模式 Apple iPad，则使用： @media (orientation: landscape) { ... }
如果目标是纵向模式 iPad，则使用： @media (orientation: portrait) { ... }
您可能已经注意到了，iPad 上使用的是 orientation 媒体特性，而 width 用于 Apple iPhone 之上。主要是因为 iPhone 不支持orientation 媒体特性。您必须使用 width 模拟这些方向断点。
6、嵌套的媒体查询：
#header&{ &&
&&width:&400 &&
&&@media&(min-width:&800px)&{ &&
&&&&width:&100%; &&
以上代码编译后为以下的结果：
#header&{ &&
&&width:&400 &&
@media&(min-width:&800px)&{ &&
&&#header&{ &&
&&&&width:&100%; &&
以上以宽度为例来对媒体查询进行一个小结， 管中窥豹，可见一斑。width和height只是两种可以用媒体查询来进行控制的属性，还有颜色（color）、颜色索引（integer）、宽高比（ratio）等属性都是也可以使用的。
以上这篇使用CSS媒体查询创建响应式布局教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
原文地址：
大家感兴趣的内容
12345678910
最近更新的内容如何制作一个响应式网页？-马海祥博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
> 如何制作一个响应式网页？
如何制作一个响应式网页？
时间：&&&文章来源：马海祥博客&&&访问次数：
前面我已经在马海祥博客上跟大家详细介绍了《》《》，接下来我要为大家分享的就是如何来做一个简单的响应式网页？
总体来说，响应式网页设计是一种新的网页设计思路，我们需要满足不同设备下的浏览模式，达到俱佳的体验效果。所以要想做好一个响应式网页，首先必须要满足桌面各个浏览器版本下正常显示页面。其次才考虑以webkit为内核的手机终端浏览器效果。由于IOS和Android浏览器都是webkit内核的，这里的响应我们暂时就不考虑ie9以下版本的浏览器了。
我们先以相对比较简单的博客网站（比如：）类型为例，它默认一个固定宽度为980px的网页，当浏览器窗口比980px小的时候，这个布局就变为100%比宽度的液态布局，而不是固定宽度。当浏览器窗口再缩小于700px的时候，我们就隐藏侧边栏。当窗口小于480px的时候，横向导航条隐藏，换成点击下拉效果的导航条。
如上图，从左至右依次为移动版本&&平板电脑&&桌面浏览器的效果。
1、响应式网页结构
首先，我们先来看下上面案例展示的html结构，如下图所示：
可以说这是一个很典型的博客模版结构。一个wrapper容器包含了头部、内容、侧栏、底部。
2、Meta标签
其次就需要我们针对移动设备加入这个meta标签。告诉webkit内核浏览器初始缩放比例为1。（很多iOS和Android的浏览器都是基于webkit内核的）
&meta name=&viewport& content=&width=device- initial-scale=1.0&&
IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。
&!--[if lt IE 8]&
　　&script src=&http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js&&&/script&
　　&![endif]--&
如果你的网站页面中用了html5文档声明，用到了很多html5标签，但是这些标签在ie9以下版本是不支持的，所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。
&!--[if lt IE 9]&
　　&script src=&/svn/trunk/html5.js&&&/script&
　　&![endif]--&
3、媒介查询-Media Queries
在这里马海祥就不再详细的讲正常页面下的布局如何写了。在此主要讲解下媒体查询media queries这个css的设计思路。这个是css3的属性，也是我们这个响应式网页设计的最重要的部分。可以说是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
&link href=&media_queries.css& rel=&stylesheet& type=&text/css&&
下面我们用CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。
@media screen and (max-width: 480px) {
　　这里就是重新设定一些css的属性
（1）、当浏览器视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。
#pagwraper { width: 94%;}重新设定容器宽度为94%;
　　#content { width: 65%; padding: 3% 4%;}重新设定内容宽度为65%;
　　#sidebar { width: 30%;}重新设定侧边栏宽度为30%
注意这里我们用到了%，使得页面是一个流体布局。
（2）、当浏览器视图宽度为小于等于700像素时，视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。
#content { width:float:margin: 20px 0;}
　　#sidebar { display: width: 100%; margin: 0; float: }
容器宽度继承了上面94%的宽度，这个时候我们设定内容宽度为自动，使其填满外部的wraper容器。并清除其浮动样式。这个时候的浏览的页面，可以权衡下右边侧栏的重要程度，如果觉得有必要继续在页面中显示，我们可以清除其浮动，并把宽度也设为100%，这样就在content这个容器下显示。但马海祥觉的一般情况下，在这么小的浏览窗口中，用户只想看到最主要的内容，右边侧栏成为了一个补助模块，那么可以直接把它隐藏掉。这样可以减少页面的高度。
（3）、当浏览器窗口小于等于480px的时候，一般这个就是iPhone的横向宽度。就要将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。
首先我们设计webkit内核浏览器下禁用文字大小调整，代码如下：
html { -webkit-text-size-adjust: }
其次就是代码的转换了，如下图所示：
其实在480px宽度下的时候，整体框架布局已经不用设置，马海祥认为我们应该考虑得更多的是怎么把一个良好的页面布局展示给用户。而在这个模式下，如果导航条有很多选项的时候，就会相互堆叠换行，那么这里我们设计成点击出下拉菜单形式，如下图所示：
这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示，所以这里我们重新设定下header的高度，能完整呈现出这个站点logo就可以了。在480px小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。
最后我想再说的一点是关于弹性图片，我们这里用到的是img { max-width: 100%; }。但是有个问题，如果图片过大会影响其加载速度，更会造成对存储空间的浪费。当然，这里有个响应式图片的实现技术思路，大家有兴趣的话可以查看《》一文。
本文为原创文章，如想转载，请注明原文网址摘自于/wyzz/279.html，注明出处；否则，禁止转载；谢谢配合！
您可能还会对以下这些文章感兴趣！
今天一早打开网站就看到很多的圈内人士在网上讨论，说百度昨晚在搜索引擎搜索页面做出的一个小变化，在搜索……
今天早上我一如既往的打开电脑查找我所需要的资料，在使用360搜索时却发现个奇怪的现象，在通过360综合搜索……
百度百家的问题在于，它还基本上是从百度新闻首页倒流给作者，但随着作者越来越多，狼多肉少，显然并非长久……
当一个搜索蜘蛛访问一个站点时，它会首先检查该站点根目录下是否……
链接也称超级链接，是指从一个网页指向一个目标的连接关系，而在……
最近我在给公司的编辑和优化人员培训时，在讲到文章关键词的密度……
为什么客户在打开网页之后很快关闭了页面？为什么我的网站停留时……
搜索引擎Spider系统的目标就是发现并抓取互联网中一切有价值的网……
目前，在中国做seo的在大多数时候，我们都是以百度和Google作为……
本月热点文章扫一扫 享优惠
新手如何快速搭建一个HTML5响应式网站
总部地址: 珠海市吉大景园路6号第七层
&销售 400-622-8200
技术 400-622-8300
耐思尼克诚意为:用户提供网络服务