建站咨询:

建站业务咨询 预约上门18041156880

公司动态| 关于联合企邦| 大连网站建设常见问题| 建站专题

大连网站建设-网站制作-响应式网站建设第一品牌-联合企邦

当前位置:首页 > 公司动态 > > 名词解释:CSS media query

名词解释:CSS media query

来自:联合企邦

2015-11-14

浏览:

CSS3 Media Query通俗来讲就是响应式媒体查询,实际应用在@media 响应式布局中。具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分。通过响应式布局,可以达到只使用单一文件提供多平台的兼容性,省去了诸如浏览器判断之类的代码。 这种设计也存在着缺点,比如我所见的不少使用响应式布局的设计在适配移动端时大量使用 display:none 隐藏富媒体元素,这样会导致大量不必要的流量。不过,对于诸如内容较少的页面或者单页式网站来说,响应式布局依然不失为一种好的网页自适应方法。

具体使用方式如下:

一、在链接CSS文件时提供判断语句,选择性加载不同的CSS文件 这句意味在满足 media 的判断语句 screen and (min-width: 400px) 即 屏幕并且最小宽度不小于400px 的介质上面使用 middle.css 。

二、在CSS文件中分段书写不同设备的代码 相信这个代码也很容易理解,写在 @media 语句段外的是共用代码,第一个 @media 语句段是 屏幕以及最小宽度600px ,第而个 @media 语句段是 屏幕以及最大宽度599px 。 如果不同的代码段有冲突或者重叠,会按照CSS原本的代码优先级排序,即后方代码替代前方代码,等等。

三、媒体介质类型 CSS3中提供了多种媒体介质类型,虽然常用的就俩……注意媒体类型名称区分大小写,并且尽管有些介质类型有重合,但是一个平台只会有一种介质类型。(我猜这个标准很多浏览器不会遵守吧?) all – 全部媒体类型 braille – 盲文触摸装置 embossed – 分页盲文打印机 (W3C的无障碍做的真细心……) handheld – 小屏幕和流量有限的手持设备(注意!安装标准来说移动设备都应该使用这个介质类型,但是实际上安卓根本不理会这个介质,请使用 screen 结合媒体查询语句使用) print – 提供给打印机的样式,最常用的介质类型,打印页面时获得适合阅读的效果 projection – 投影,给投影机使用(有人用?) screen – 彩色屏幕,最常用的介质类型,一般和屏幕大小表达式联合使用 speech – 语音朗诵,用于屏幕阅读软件(和将来的Siri?) tty – 固定间距字符网格,例如功能机那样的 tv – 智能电视设备(唔不知道我家的创维酷开支持如何……)

四、媒体查询语句 除了媒体介质,我们还能通过 and 使用 Media Query 语句,达到对屏幕大小的判断生成响应式布局。(可以通过改变浏览器窗口大小在桌面下测试效果) 一个 Media Query 包含一种媒体类型,如果媒体类型没有指定,那么就是默认类型all,比如:

/*responsive 1024 || 1136 == ml mr 50 联合企邦响应式代码示范*/
@media (min-width:1000px) and (max-width:1190px){代码}


五、浏览器支持 媒体介质在CSS2中已经被添加,因此主流平台的浏览器毫无疑问都可以正确支持。但是 Media Query 语句是CSS3中添加的新功能,部分浏览器可能并不理解。例如IE能成功解读媒体介质,但是却无法解读 and 后面的媒体查询语句,就会连带媒体介质一起忽略。为了让不识别媒体查询语句的浏览器依然识别到媒体介质,可以使用 only 关键字进行hack。

最后是浏览器支持情况:

IE8-

IE9+

Chrome 5+

Opera 10+

Firefox 3.6+<

Safari 4+

以上看出,实际上目前主流浏览器都支持

TAG:响应式名词CSS media query

您也许还喜欢

提示:手机触屏可一键拨号,电话:18041156880
关于联合企邦
公司介绍
专业团队
资质荣誉
企业文化
公益事业
核心优势
响应式设计
技术支持
建站流程
开发规范
售后服务
企业建站解决方案
高端定制响应式网站建设
高端定制传统网站建设
H5响应式高级模板
响应式入门模板

© 2013-2018 联合企邦   辽ICP备14000229号   辽ICP证辽B2-20150006号

大连网站报价 网站报价
大连网站制作电话-18041156880

大连中山区/西岗区/沙河口区/甘井子
区/高新园/旅顺/金州区/开发区

qq在线咨询 咨询QQ

输入手机号,我们即刻给您回电

留言成功

成功!客服人员会和您联系。

留言失败

失败!请重新输入电话。

大连网站SEO-网站优化-大连网站推广 推荐:网站推广2016百万PV视频广告
返回顶部