`

用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解

    博客分类:
  • CSS
 
阅读更多

 

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 最小最大宽度的判断。

实例

说多了也不好理解,我们最方便从实例中学习怎么运用。下面给出一个页面例子,你可以从这个例子中看出,不同浏览器屏幕宽度、高度下的背景颜色的自动变换:

点击查看演示页面Demo

其中核心的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的内核,这些东西都是兼容的。所以这么好用的一个属性,大家都喜欢用。

分享到:
评论

相关推荐

    简单仿flash动画css3个人博客模板下载4905.zip

    媒体查询(@media query)是实现这一功能的关键,可以根据屏幕尺寸、分辨率等因素调整页面样式,使博客在手机、平板和桌面电脑上都能自适应显示。 3. **Flexbox布局** CSS3的Flexbox模型简化了复杂的网页布局设计...

    9款超炫的 CSS3 复选框

    6. **响应式复选框**:结合媒体查询(media query)和CSS3,可以实现复选框在不同设备或屏幕尺寸下的自适应布局,确保在任何环境下都能良好展示。 7. **动态反馈复选框**:通过CSS3的伪元素和动画,可以在用户点击...

    贵美商城htmlcssjs完整示例代码_贵美商城完整源代码htmI,贵美商城的html网页制作代码

    这涉及到媒体查询(`@media query`)的应用,以及流式布局的设定,确保在手机、平板电脑和桌面电脑上都有良好的用户体验。 5. **前端框架与库**:虽然题目没有明确提及,但现代前端开发常常会使用如Bootstrap或Vue....

    jquery自适应浏览器全屏幻灯片切换代码

    2. **自适应布局**:使用媒体查询(`@media query`)处理不同屏幕尺寸下的布局,确保在手机、平板和桌面设备上均能良好显示。 3. **事件绑定**:使用jQuery的`$(document).ready()`确保DOM加载完成后执行初始化代码...

    jQuery结合Css3制作的多风格轻量级弹出动感对话框插件特效源码.zip

    利用CSS3的媒体查询(`media query`),我们可以根据视口宽度调整对话框的大小和位置,确保在手机、平板和桌面电脑上都有良好的显示效果。 **7. 配置选项与事件绑定** 对话框插件通常支持多种配置选项,如对话框的...

    自己做的ASP+SQL手机网站

    开发者可能使用了CSS3的媒体查询(Media Queries)来实现这一目标,根据不同设备的屏幕尺寸和方向调整内容的布局。此外,考虑到手机用户的交互习惯,可能还优化了触摸事件和页面加载速度。 1. **ASP基础** - **...

    jQuery左侧栏抽屉式导航菜单代码

    例如,当屏幕尺寸较小,可以使用媒体查询(media query)改变菜单的显示方式。 6. **资源引用** 在HTML头部引用jQuery库和自定义的CSS与JS文件。确保它们的路径正确,如: ```html ...

    html登录页面login039.rar

    例如,使用媒体查询(`@media query`)可以针对不同屏幕尺寸设置不同的样式,使页面在手机、平板和桌面电脑上都能提供良好的用户体验。同时,CSS还可以用来美化表单元素,如设置边框、背景色、字体样式等,提升页面...

    手机页面模版html5源码-仿亞普達手机wap旅游网站模板下载 (2).zip

    CSS3提供了媒体查询(@media query)功能,通过设置不同的断点,可以实现自适应布局,让手机页面在横屏和竖屏模式下都能有良好的用户体验。 该模板中,我们可能看到使用了诸如Flexbox或Grid这样的现代布局模型,...

    projetos:Projetos Simples feitos em html + css

    3. **响应式设计**:在这些项目中,你可能还会发现如何使用媒体查询(`@media query`)来实现响应式设计,使网页能在不同设备(如手机、平板、桌面电脑)上自适应显示。例如,通过设置断点,可以确保在小屏幕设备上,...

    jQuery后台左侧伸缩菜单代码.zip

    3. 响应式设计:考虑到不同设备的屏幕尺寸,可以添加媒体查询(media query)实现自适应布局,确保在手机和平板等小屏设备上也能良好展示。 总结,"jQuery后台左侧伸缩菜单代码"是一个优秀的后台导航解决方案,通过...

    RabatWebSite:这是网站响应所有我使用翻页卡的设备..

    对于响应式设计,他们可能利用了`&lt;meta&gt;`标签的`viewport`属性来控制在移动设备上的显示效果,以及使用`&lt;media query&gt;`来根据设备屏幕尺寸调整CSS样式。 【压缩包子文件的文件名称列表】 文件名“RabatWebSite-main...

    ok

    在移动设备普及的今天,HTML配合CSS3的媒体查询(`@media query`)和弹性布局(Flexbox)或网格布局(Grid)技术,能够实现不同设备上的自适应布局。 总的来说,HTML是网页设计的基础,理解和掌握其语法和规则是...

    resume:我更新的简历

    6. **响应式设计**:为了让简历在不同设备上都能良好显示,可以使用媒体查询(`@media query`)调整不同屏幕尺寸下的布局。 7. **优化与兼容性**:确保代码规范,减少冗余,使用HTML5的语义化标签,以提高可读性和...

    简历

    通过媒体查询(`@media query`),你可以为不同屏幕尺寸定义不同的样式,使简历在任何设备上都能自适应显示。 五、预览与发布 完成HTML简历后,可以使用浏览器的开发者工具进行预览和调试。若满意,可将其上传至...

    fitness:psd到html的健身网站模板

    例如,使用`background-color`设置背景色,`font-family`定义字体,`margin`和`padding`调整元素间距,以及`@media query`进行响应式设计,确保网站在不同设备上都能良好显示。 四、响应式设计 考虑到用户可能在...

Global site tag (gtag.js) - Google Analytics