Web之CSS开发技巧: CSS @media
CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法。目前，print 媒体的使用非常普遍，与实现单独的 “可打印版本” 相比，print 提供了更加整洁的方式来创建打印机友好的页面。screen 媒体一直未得到充分利用，原因可能是因为人们通常都认为 screen 仅仅是 “默认的呈现方式”。然而，就布局而言（尤指绝对布局），screen 媒体类型具有重要的意义，样式表规则并不关心媒体类型，因此没有涵盖这一点。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Using CSS media types</title>
@CSS
</head>
<body>
<div class="top">
@ITEMS
</div>
<div class="bottom">
@SUMMARY
</div>
</body>
</html>
div.bottom {
background-color: lightblue;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 20px;
}
div.top {
background-color: white;
}
li.odd {
background-color: #EAEAFF;
}
li.even {
background-color: #FCFCFC;
}
当您希望向下滚动 <div class="top"> 中编号的行时，问题出现了, summary这个元素条不再显示在底部。
修改bug方法
div.bottom {
background-color: lightblue;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 20px;
}
div.top {
background-color: white;
}
li.odd {
background-color: #EAEAFF;
}
li.even {
background-color: #FCFCFC;
}
fixed这个属性值，当然能实现summary这个div条用于悬停在底部，但是并不是每一个版本的浏览器都支持，
当然，我希望将各种媒体以适合其显示特征的方法显示出来，但同时仍然共享独立于媒体（某些）的可视属性。要同时实现正确地屏幕显示和打印显示，我所需做的就是使用 @media 规则创建一个稍微复杂一点的样式表：
使用两种 @media 规则的 CSS:()
@media screen 和 @media print
li.odd {
background-color: #EAEAFF;
}
li.even {
background-color: #FCFCFC;
}
@media screen {
div.bottom {
background-color: lightblue;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 20px;
}
div.top {
background-color: white;
}
}
@media print {
div.bottom {
position: absolute;
top: 0px;
}
div.top {
position: relative;
top: 20pt;
}
}
可以看到，奇偶行的颜色保持不变，但是 top 和 bottom<div> 元素的特定位置针对媒体的不同做了调整。
Web之CSS开发技巧: CSS @media的更多相关文章
- Web之CSS开发技巧: CSS 居中大全
<center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...
- 2008年最佳Web设计/前端开发技巧、脚本及资源总结
工具&Web应用 13个可能会让你说”Thank You”的必不可少的开源应用 14个免费工具让你了解为什么人们会放弃访问你的网站 40+CSS生成器 74个我们可能已经忘记的适合网页设计师的 ...
- 提高你css技能的css开发技巧(转载)
一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例效果如下图 (鼠标移到左下角白色区域,往右侧拖动,实现 ...
- 提高你css技能的css开发技巧
好久没整理博客了 进来啰嗦两句 继续抄别人的博客 一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例 ...
- CSS开发技巧(三)：图片点击缩放
前言 利用CSS实现图片的点击缩放是一个很值得研究的效果.在某些业务需求场景中,我们可能并没有足够的空间展示过大的图片,这就需要限制图片容器的宽度和高度.然而图片限制了宽度,一些图片的细节便又无法看 ...
- CSS开发技巧(二）：表格合并边框后的单元格宽度计算
前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...
- CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题
在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...
- CSS开发技巧（一）：button样式设置
button样式需要注意的有几点: 1.建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调: 2.建议有一个padding,以免内部文本显得过于拥挤: 2.hover时需要有颜色变化,以告 ...
- web移动端开发技巧与注意事项汇总
一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...
随机推荐
- POJ2479 Maximum sum(dp)
题目链接. 分析: 用 d1[i] 表示左向右从0到i的最大连续和,d2[i] 表示从右向左, 即从n-1到i 的最大连续和. ans = max(ans, d1[i]+d2[i+1]), i=0,1 ...
- php header()跳转
test1.php <?PHP $g_user = "Jack"; echo $g_user; ?> test3.php <?PHP header('Locati ...
- 用SQL替换最后一个指定字符后面的所有字符
下面给出任意字符串,该字符串长度未定,只知道该字符串有许多个‘-’连接起来的,现在要把最后一个‘-’后面的字符替换掉为指定串. 假如字符串为:'x1253-axebx-xcdx-o9kgl-3ddll ...
- iOS利用Runtime自定义控制器POP手势动画
前言 苹果在iOS 7以后给导航控制器增加了一个Pop的手势,只要手指在屏幕边缘滑动,当前的控制器的视图就会跟随你的手指移动,当用户松手后,系统会判断手指拖动出来的大小来决定是否要执行控制器的Pop操 ...
- 基于Equinox构建OSGi项目
几种OSGi框架 Several independently implemented OSGi frameworks exist today, including four that are avai ...
- 【COM学习】之一、QueryInterface
开始先说一句,学习com之前要学好c++ 对象模型. QueryInterface的使用: QueryInterface是IUnknown的一个成员函数,客户可以通过此函数来查询某个组件是否支持某个特 ...
- js中widow.open()方法详解
一. window.open() 支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,nam ...
- 机房管理系统——vb与excel链接2
因为我之前找的文档让我以为在创建表里面走了非常大的误区,所以当时我直接就在学生管理系统的目录里建了张表,执行时候直接打开这样表即可了. 可是这里面还是存在着非常大的误区. 后来我看了周坤的博客感觉他比 ...
- 在JAVA中 System.getProperty 和 System.setProperty 方法.
今天着手研究TOMCAT源码. 在刚開始的时候Startup类中init方法中调用非常多次System.getProperty和System.setProperty的方法. 后来经过网上搜索才得知,这 ...
- javascript中的继承用法
本文实例汇总了javascript关于继承的用法,希望本文所述对大家的javascript程序设计有所帮助.分享给大家供大家参考.具体如下:代码如下: /** * 实现子类继承父类,但不会产生多余的属 ...