快速业务通道

CSS样式表教程:screen媒体类型的作用

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-05
;top"> 中编号的行时,问题出现了:

图 2. 非 @media 式样式表的屏幕问题

解决滚动问题的方法似乎是使用 <div>fixed 而不是 absolute 布局。

div.bottom {
    background-color: lightblue;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 20px;
}
/* ...Rest of CSS styling */

 这个细微的改动确实修复了玩具应用程序的屏幕显示问题,但是现在,同一个页面的打印版本中出现了一个令人不快的工件。为演示这个问题,我设置了一个极其短小的页面长度:

图 3. 非 @media 式样式表的打印问题

当然,我希望将各种媒体以适合其显示特征的方法显示出来,但同时仍然共享独立于媒体(某些)的可视属性。要同时实现正确地屏幕显示和打印显示,我所需做的就是使用 @media 规则创建一个稍微复杂一点的样式表:

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;
  }
}

 可以看到,奇偶行的颜色保持不变,但是 topbottom <div> 元素的特定位置针对媒体的不同做了调整。产生如图 4 的效果:

图 4. 在使用 @media 规则的样式表中纠正打印显示

令人高兴的是,屏幕仍然保持其正确的显示状态。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号