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的内核,这些东西都是兼容的。所以这么好用的一个属性,大家都喜欢用。
相关推荐
媒体查询(@media query)是实现这一功能的关键,可以根据屏幕尺寸、分辨率等因素调整页面样式,使博客在手机、平板和桌面电脑上都能自适应显示。 3. **Flexbox布局** CSS3的Flexbox模型简化了复杂的网页布局设计...
6. **响应式复选框**:结合媒体查询(media query)和CSS3,可以实现复选框在不同设备或屏幕尺寸下的自适应布局,确保在任何环境下都能良好展示。 7. **动态反馈复选框**:通过CSS3的伪元素和动画,可以在用户点击...
这涉及到媒体查询(`@media query`)的应用,以及流式布局的设定,确保在手机、平板电脑和桌面电脑上都有良好的用户体验。 5. **前端框架与库**:虽然题目没有明确提及,但现代前端开发常常会使用如Bootstrap或Vue....
2. **自适应布局**:使用媒体查询(`@media query`)处理不同屏幕尺寸下的布局,确保在手机、平板和桌面设备上均能良好显示。 3. **事件绑定**:使用jQuery的`$(document).ready()`确保DOM加载完成后执行初始化代码...
利用CSS3的媒体查询(`media query`),我们可以根据视口宽度调整对话框的大小和位置,确保在手机、平板和桌面电脑上都有良好的显示效果。 **7. 配置选项与事件绑定** 对话框插件通常支持多种配置选项,如对话框的...
开发者可能使用了CSS3的媒体查询(Media Queries)来实现这一目标,根据不同设备的屏幕尺寸和方向调整内容的布局。此外,考虑到手机用户的交互习惯,可能还优化了触摸事件和页面加载速度。 1. **ASP基础** - **...
例如,当屏幕尺寸较小,可以使用媒体查询(media query)改变菜单的显示方式。 6. **资源引用** 在HTML头部引用jQuery库和自定义的CSS与JS文件。确保它们的路径正确,如: ```html ...
例如,使用媒体查询(`@media query`)可以针对不同屏幕尺寸设置不同的样式,使页面在手机、平板和桌面电脑上都能提供良好的用户体验。同时,CSS还可以用来美化表单元素,如设置边框、背景色、字体样式等,提升页面...
CSS3提供了媒体查询(@media query)功能,通过设置不同的断点,可以实现自适应布局,让手机页面在横屏和竖屏模式下都能有良好的用户体验。 该模板中,我们可能看到使用了诸如Flexbox或Grid这样的现代布局模型,...
3. **响应式设计**:在这些项目中,你可能还会发现如何使用媒体查询(`@media query`)来实现响应式设计,使网页能在不同设备(如手机、平板、桌面电脑)上自适应显示。例如,通过设置断点,可以确保在小屏幕设备上,...
3. 响应式设计:考虑到不同设备的屏幕尺寸,可以添加媒体查询(media query)实现自适应布局,确保在手机和平板等小屏设备上也能良好展示。 总结,"jQuery后台左侧伸缩菜单代码"是一个优秀的后台导航解决方案,通过...
对于响应式设计,他们可能利用了`<meta>`标签的`viewport`属性来控制在移动设备上的显示效果,以及使用`<media query>`来根据设备屏幕尺寸调整CSS样式。 【压缩包子文件的文件名称列表】 文件名“RabatWebSite-main...
在移动设备普及的今天,HTML配合CSS3的媒体查询(`@media query`)和弹性布局(Flexbox)或网格布局(Grid)技术,能够实现不同设备上的自适应布局。 总的来说,HTML是网页设计的基础,理解和掌握其语法和规则是...
6. **响应式设计**:为了让简历在不同设备上都能良好显示,可以使用媒体查询(`@media query`)调整不同屏幕尺寸下的布局。 7. **优化与兼容性**:确保代码规范,减少冗余,使用HTML5的语义化标签,以提高可读性和...
通过媒体查询(`@media query`),你可以为不同屏幕尺寸定义不同的样式,使简历在任何设备上都能自适应显示。 五、预览与发布 完成HTML简历后,可以使用浏览器的开发者工具进行预览和调试。若满意,可将其上传至...
例如,使用`background-color`设置背景色,`font-family`定义字体,`margin`和`padding`调整元素间距,以及`@media query`进行响应式设计,确保网站在不同设备上都能良好显示。 四、响应式设计 考虑到用户可能在...