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 ...
随机推荐
- Radar Installation 贪心
Language: Default Radar Installation Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 42 ...
- BZOJ1677: [Usaco2005 Jan]Sumsets 求和
1677: [Usaco2005 Jan]Sumsets 求和 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 570 Solved: 310[Submi ...
- Mutex — Windows API
Mutex是互斥体的意思,当一个线程持有一个Mutex时,其它线程申请持有同一个Mutex会被阻塞,因此可以通过Mutex来保证对某一资源的互斥访问(即同一时间最多只有一个线程访问).调用Create ...
- libvirt API管理hypervisors
发布一段C代码,用于连接指定的KVM宿主机器,获得该宿主机器的配置信息,以及该主机上所有的虚拟主机列表.状态及配置信息: #include <stdio.h>#include <st ...
- Hadoop集群与RAID磁盘阵列
Hadoop集群规范 硬盘选型 尽管建议采用RAID(Redundant Array of Independent Disk,即磁盘阵列)作为NameNode的存储器以保护元数据,但是若将RAID作为 ...
- Jquery中常见问题
最近也是在做项目的时候刚接触到jQuery.下面汇总一下遇到的几个问题 如何动态创建按钮 方式一: $("#a").html("<input type='butto ...
- JQuery Mobile页面的载入方式
1.JQM页面结构 jQuery Mobile是通过data-role属性来区分渲染界面样式的,JQM里面提供的data-role如下表: 参数 说明 page 页面容器,其内部的mobile元素将会 ...
- struct 结构
//原始套接字学习笔记之代码结构 /* *host端程序结构 */ #include <> #define .. //主函数 int main() { //建立发送线程 pthread_t ...
- Heritrix的安装与配置 （最新版 已测试通过）
本教程,结合本人亲身实践,不仅适合于最新版本Heritrix 1.14.4,更适合其他任何版本.Heritrix具体下载地址如下: http://sourceforge.net/projec ...
- Android Dialog 系统样式讲解及透明背景
AlertDialog.Builder builder = new AlertDialog.Builder(DialogActivity.this,AlertDialog.THEME_TRADIT ...