响应试设计目前早已渗透到web前端的方方面面,说到响应式设计我们就会用到媒体查询(media queries),它可以帮助你根据浏览器尺寸对网页中的元素信息相应的布局调整,当然你还可以借助css3的一些新的特性,添加一些过渡效果。
无论你是用框架还是自己写的媒体查询方式,你就会感受到它自身灵活的地方,以及给你的网站带来更加完美的用户体验。
HTML 结构
下面我将向大家举一个简单的例子来演示媒体查询的使用方法,首先我将使用一个大的div类 (.layout),并且包含三个小的div类 (.box),以下是html代码结构:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css media queries </title> </head> <body> <div class='layout'> <div class='box'></div> <div class='box'></div> <div class='box'></div> </div> </body> </html>
css样式
接下来我们再添加一些简单的样式
.layout { width:960px; height:600px; background:#b34d6f; margin:auto; } .box { width:300px; height:200px; margin-right:22px; background:#4d77b3; display:inline-block; margin-top:50px; } .box:last-child { margin-right:0px; }
目前我们还没有使用媒体查询,你现在可以尝试改变浏览器窗口,页面中的三个元素是不会有变化的。
添加媒体查询 media queries
现在我们要为页面设置一些尺寸分割点,分别设置了小于最大宽度为960px的显示方式以及小于最大宽度为660px的页面显示方式。
.layout { width:960px; height:600px; background:#b34d6f; margin:auto; } .box { width:300px; height:200px; margin-right:22px; background:#4d77b3; display:inline-block; margin-top:50px; } .box:last-child { margin-right:0px; } @media screen and (max-width: 660px) { .layout { width:570px; } .box { width:170px; } .box:last-child { opacity:0; } }
现在我们可以尝试改变一下浏览器的尺寸大小,当宽度小于660px时第三个元素就会消失,我把它的透明度设置为0.
添加过渡动画效果
如果你不想让元素变化得太突兀,即突然消失,我们可以为元素添加一些css3新特性,为了解决浏览器的兼容问题,我们还需添加一些前缀名。
* { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .layout { width: 960px; height: 600px; background: #b34d6f; margin: auto; } .box { width: 300px; height: 200px; margin-right: 22px; background: #4d77b3; display: inline-block; margin-top: 50px; } .box:last-child { margin-right: 0px; } @media screen and (max-width: 660px) { .layout { width: 570px; } .box { width: 170px; } .box:last-child { opacity: 0; } }
现在我们可以尝试改变浏览器尺寸,看下最后一个元素变化的效果,来对比一下之前变化的区别。
相关推荐
如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且媒体查询中的所有表达式为真。 CSS Code复制内容到剪贴板 <!– link元素中的CSS媒体查询 –> <link rel="stylesheet" media="(max...
网页中嵌入windows media player示例
Media Queries移动设备样式
在给Mozilla Developer Networks改版设计的过程中,我发现使用CSS媒体查询(media queries)虽然非常的有效,但有时,JavaScript却不能及时知道用户浏览设备的状态。浏览网站的用户使用的是桌面电脑,还是平板,还是...
我们现在只好使用已经破解了的realserver8这个软件了,但realserver8不支持windowsmedia,要想实现“通吃”,只能在一台服务器上架设两种流媒体服务器,当然如果对流媒体知识不深的朋友建议用windows media server。
Jaksta媒体录像机易于使用 - 只需打开Jaksta ,然后播放你的媒体,看作为一个完美的副本保存在您的电脑上 - 甚至在剪辑播放完毕! Jaksta媒体录像机可以从支持的HTTP站点下载。选择您希望您的视频和音乐从主屏幕...
允许您遵循规范在CSS中使用自定义媒体查询。 @custom-media --small-viewport ( max-width : 30 em ); @media ( --small-viewport ) { /* styles for small viewport */ } /* becomes */ @media ( max-width : 30...
扩展media-queries服务以在media属性中定义您的媒体查询(例如,断点,设备方向)。 // app/services/media-queries.js import MediaQueriesService from 'ember-cli-media-queries/services/media-queries' ; ...
Social Media"按照字面的意思翻译是“社会媒体”,而它的功能类似于书签的作用,我暂把它叫做书签插件(如果有更好的翻译,再进行更改),这款将添加一个列表或链接,可以把这个链接添加到你所发布的文章中,也可以...
NULL 博文链接:https://onestopweb.iteye.com/blog/2316391
主要介绍了CSS3 Media Queries中媒体属性的使用,文章中还以一个响应式设计的例子作为补充讲解,需要的朋友可以参考下
媒体类型 all 所有设备 screen 电脑显示器 handheld 便携设备 tv ... and 示例如下所示: @media screen and (min-width: 800px) {样式代码} >800 @media screen and (min-width: 600px) and (max-width: 800px) {样式
在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默认值) tty 电传打字机以及使用等宽字符网格的类似...
pb使用media player播放mms多媒体资源
NULL 博文链接:https://lyh7609.iteye.com/blog/1090191
排序媒体查询 ... 用于对媒体查询列表中的对象进行排序的属性。 例子 var smq = require ( 'sort-media-queries' ) ; smq ( [ "screen and (min-width:1278px)" , "screen and (min-width:100px)" ,
Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果 @media 媒体类型and (媒体特性){你的样式} 最大宽度max-width “max-width”是媒体特性中最常用的一个特性,其意思...
《云端媒体 Qloud Media Free》拥有Qloud Media就可拥有专属您个人的随身多媒体剧院!只需在PC端的Qloud服务器设定分享影片、音乐及图片,Qloud Media就可以在你的手机上随时随地享受影音多媒体欢乐!您不再需要拷贝...
对于预处理器使用嵌套媒体查询生成CSS很有用。 这个插件是最初的fork 的进一步开发。 这是从启发而来的。安装npm install gulp-join-media-queries --save-dev用法var jmq = require ( 'join-merge-media-queries' ...