Web之CSS开发技巧: CSS @media

时间 2019-11-10

标签 web css 开发技巧 media 栏目 HTML 繁體版

原文原文链接

CSS @media 规则很是适合于将 HTML 或 XML 文档定位为目标输出方法。目前，print 媒体的使用很是广泛，与实现单独的 “可打印版本” 相比，print 提供了更加整洁的方式来建立打印机友好的页面。screen 媒体一直未获得充分利用，缘由多是由于人们一般都认为 screen 仅仅是 “默认的呈现方式”。然而，就布局而言（尤指绝对布局），screen 媒体类型具备重要的意义，样式表规则并不关心媒体类型，所以没有涵盖这一点。html

<!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条用于悬停在底部，可是并非每个版本的浏览器都支持，spa

固然，我但愿将各类媒体以适合其显示特征的方法显示出来，但同时仍然共享独立于媒体（某些）的可视属性。要同时实现正确地屏幕显示和打印显示，我所需作的就是使用 @media 规则建立一个稍微复杂一点的样式表：code

使用两种 @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> 元素的特定位置针对媒体的不一样作了调整。htm

1. CSS 开发技巧
2. Web之CSS开发技巧: CSS 居中大全
3. web前端开发技巧（HTML+CSS+Jquery）
4. CSS之media Query
5. CSS技巧（二）：CSS hack
6. CSS技巧
7. CSS hack技巧
8. 小猿圈web前端开发之CSS缩写技巧
9. Web Essentials之HTML和CSS操作技巧
10. Web前端开发技巧：CSS开发中的十不要
更多相关文章...
• W3C CSS 活动 - W3C 教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• PHP开发工具
• JDK13 GA发布：5大特性解读