http://www.uiej.com/905.html
如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。比如说我们熟悉的wordpress后台,当屏幕分辨率小于900px的时候,左边的侧栏就会变成收拢状态(@media only screen and (max-width:900px))。
这样的好处:让顾客得到最佳的网页视图;但是依然存在坏处:比如我自己的习惯喜欢在手机上查某些资料,某些网页用手机打开自适应后导致我要找的资料被隐藏了,比较烦躁。结论:请善用这种技术,比如前面wordpress后台的例子,收拢状态的侧栏,依然可以被点击后展开,这就是一个完美的例子。
不管怎么样,作为网站前端开发人员需要知道并且会用这种知识。这篇文章让我们揭开 css 里面 @media 属性的神秘面纱,学习一下是如何实现的。
css2里面的@media
@media 属性在CSS2里面已经存在,参见CSS2在线手册-有爱一街版:@media sMedia { sRules } 属性详解,在这个说明页面我们可以看到在css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS。
语法: @media sMedia { sRules } 说明: sMedia : 指定设备名称。请参阅附录:设备类型 sRules : 样式表定义 指定样式表规则用于指定的设备类型。请参阅link对象的media属性(特性)。 示例: // 设置显示器用字体尺寸 @media screen { BODY {font-size:12pt; } } // 设置打印机用字体尺寸 @media print { @import "print.css" BODY {font-size:8pt;} }
css3里面的@media
@media 属性在CSS3里面已经演变成一种 media queries(媒体查询/匹配)了,参见CSS3在线手册-有爱一街版:media queries 详解,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。
语法:@media :<sMedia> { sRules } 取值: <sMedia>: 指定设备名称。请参阅附录:设备类型 {sRules}: 样式表定义。 说明: 判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型,同一媒介的不同条件(分辨率、色数等等). media_query: [only | not]? <media_type> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid
解析
media_query 媒体查询条件。包括了 only not and 这些经常在程序里面出现的逻辑判断。
expression 表达式。媒体特征的匹配与否。
media_type 媒体的种类。包括了很多。
media_feature 媒体的特征。常用的是 min-width max-width 最小最大宽度的判断。
实例
说多了也不好理解,我们最方便从实例中学习怎么运用。下面给出一个页面例子,你可以从这个例子中看出,不同浏览器屏幕宽度、高度下的背景颜色的自动变换:
其中核心的css代码如下:
<style type="text/css"> body{background:blue;} /*蓝色 默认颜色只有当下面条件都不匹配的时候,即宽度500px-800px之间+高度100px-400px之间*/ @media screen and (max-width:500px){body{background:green;}} /*宽度小于500px时 绿色*/ @media screen and (min-width:800px){body{background:red;}} /*宽度大于800px时 红色*/ @media screen and (max-height:100px){body{background:yellow;}} /*高度小于100px时 黄色*/ @media screen and (min-height:400px){body{background:pink;}} /*高度大于400px时 粉色*/ @media screen and (min-width: 600px) and (max-width: 900px){.....} /*宽度在600px-900px之间时候...*/ @media screen and (width:1024px){.....} /*宽度刚刚好等于1024px的时候...*/ </style>
从上面的实例可以看出,要小于的时候用max,要大于的时候用min,逻辑是正好相反的,大家注意一下。
扩展总结
有了媒体匹配查询的CSS3功能之后,你就可以在一个页面上定义多套显示风格了,非常好用方便。
但是低级版本的IE不支持怎么办?谁去管它呢?你有默认的一套风格都支持就好了啊,一般手机上的浏览器都是webkit的内核,这些东西都是兼容的。所以这么好用的一个属性,大家都喜欢用。
相关推荐
根据图片大小自适应的CSS,根据图片大小自适应的CSS
要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上。 ②用于为不同的媒介类型规定不同的样式。 语法: @media 设备名 only (选取条件) ...
使用CSS3-Media-Query技术适配Android平板屏幕分辨率和屏幕密度.docx
可以适应各种终端设备各种分辨率,如手机,平板,PC,自动会调整到最佳显示排版效果。
越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。 一、CSS2 中的@media css2里面虽然支持@media属性,但是能实现的功能比较少...
bootstrap - 後台_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
手机站首页-背景轮换_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
手机-PC站自动跳转(PC-手机)_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局
黑色导航宽屏自适应css模板_黑色 宽屏 自适应 展示_html网站模板_网页源码移动端前端_H5模板_自适应响应式源.rar
自适应一直就是都是前端开发的大难题,特别是现在越来越多的项目喜欢大屏展示,今天公司给我的项目便是一个可视化大屏的项目,而且宽高只告诉了大概是4000*2000,然后使用的Vue3进行开发,网上找了一下几乎都是Vue2...
主要介绍了详解CSS3中@media的实际使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下
当今屏幕分辨率从320px(iPhone)到2560px(大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑...用CSS3媒体查询(Mediaquery)来检验屏幕分辨率,如果小于980px,页面宽度将会用自适应来取
首先我们需要要安装一些依赖 npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小 npm i px2rem-loader -D//自动将px转换为rem npm i postcss-px2rem//将代码中px自动转化成对应的...
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 PC端设备屏幕的宽度 页面宽度大于1000px(>=1000)且小于1200px(<=1200)的时候执行下面的CSS(实际刚好“>=1000”或“<=1200”...
原创WordPress自适应图片模板:Reeoo-V3特点介绍:根据屏幕分辨率自适应的,这个自适应只是根据分辨率来决定一行内容显示的多少;主题支持自定义菜单和小工具;支持评论功能;文章页显示6个随机文章;自带AddThis的...
呵呵 很好哦 css自适应宽度的按钮!
在css中,可以利用“background-size”属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加“background-size:cover;”样式,即可使背景图片的大小自适应。
CSS自适应宽度按钮! 很值得下载看看!资源免费,大家分享!!
<CSS强制图片自适应大小><CSS强制图片自适应大小><CSS强制图片自适应大小><CSS强制图片自适应大小>