6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

css笔记09-css 媒体查询&3d立方体

2022-04-28 0 42 web前端社区

6.jpg 0 前端程序猿

3d盒子模型

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .box{
  6. position: relative;
  7. margin: 300px auto;
  8. width: 250px;
  9. height: 250px;
  10. transform-style: preserve-3d;
  11. border: 1px solid gray;
  12. transform: rotateX(-42deg) rotateY(-24deg) scaleZ(0.8);
  13. transition: transform 5s;
  14. }
  15. .box:hover{
  16. transform: rotateX(360deg) rotateY(360deg);
  17. }
  18. .box > div{
  19. position: absolute;
  20. width: 250px;
  21. height: 250px;
  22. text-align: center;
  23. line-height: 250px;
  24. font-size: 100px;
  25. }
  26. .left{
  27. transform: translateX(-50%) rotateY(90deg);
  28. background-color: rgba(199, 173, 69);
  29. }
  30. .right{
  31. transform: translateX(50%) rotateY(90deg);
  32. background-color: rgb(177, 199, 69);
  33. }
  34. .front{
  35. transform: translateZ(125px);
  36. background-color: rgb(69, 199, 169);
  37. }
  38. .backend{
  39. transform: translateZ(-125px);
  40. background-color: rgb(69, 147, 199);
  41. }
  42. .top{
  43. transform: translateY(-50%) rotateX(90deg);
  44. background-color: rgb(123, 69, 199);
  45. }
  46. .bottom{
  47. transform: translateY(50%) rotateX(90deg);
  48. background-color: rgb(173, 53, 145);
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <div class="box">
  54. <div class="front"></div>
  55. <div class="backend"></div>
  56. <div class="left"></div>
  57. <div class="right"></div>
  58. <div class="top"></div>
  59. <div class="bottom"></div>
  60. </div>
  61. </body>
  62. </html>

@media 媒体查询

CSS 语法

  1. @media not|only mediatype and (mediafeature and|or|not mediafeature) {
  2. CSS-Code;
  3. }

not, and, 和 only 可用于联合构造复杂的媒体查询,您还可以通过用逗号分隔多个媒体查询,将它们组合为一个规则。

not, only 和 and 关键字含义:

  • not: not 运算符用于否定媒体查询,如果不满足这个条件则返回 true,否则返回 false。 如果出现在以逗号分隔的查询列表中,它将仅否定应用了该查询的特定查询。 如果使用 not 运算符,则还必须指定媒体类型。
  • only: only 运算符仅在整个查询匹配时才用于应用样式,并且对于防止较早的浏览器应用所选样式很有用。 当不使用 only 时,旧版本的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen,忽略查询的其余部分,并将其样式应用于所有屏幕。 如果使用 only 运算符,则还必须指定媒体类型。
  • , (逗号) 逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此,如果列表中的任何查询为 true,则整个 media 语句均返回 true。 换句话说,列表的行为类似于逻辑或 or 运算符。
  • and: and 操作符用于将多个媒体查询规则组合成单条媒体查询,当每个查询规则都为真时则该条媒体查询为真,它还用于将媒体功能与媒体类型结合在一起。

媒体类型(Media types)描述设备的一般类别。除非使用 not 或 only 逻辑操作符,媒体类型是可选的,并且会(隐式地)应用 all 类型。

你也可以针对不同的媒体使用不同样式文件 :

  1. <!-- 宽度大于 900px 的屏幕使用该样式 -->
  2. <link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
  3. <!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
  4. <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
  5. ....

媒体类型

描述
all 用于所有设备
aural 已废弃。用于语音和声音合成器
braille 已废弃。 应用于盲文触摸式反馈设备
embossed 已废弃。 用于打印的盲人印刷设备
handheld 已废弃。 用于掌上设备或更小的装置,如PDA和小型电话
print 用于打印机和打印预览
projection 已废弃。 用于投影设备
screen 用于电脑屏幕,平板电脑,智能手机等。
speech 应用于屏幕阅读器等发声设备
tty 已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备
tv 已废弃。 用于电视和网络电视

@media 用来根据一个或多个媒体查询的结果来应用样式表的某一部分(花括号中的样式信息),使用 @media 您可以指定一组媒体查询和一个 CSS 样式块,当且仅当媒体查询与正在使用的设备匹配时,指定的 CSS 样式才会应用于文档。

媒体查询是用于判断设备信息的一组条件,如设备的宽高值,宽高比,颜色,分辨率等,当条件匹配时,才会执行其内嵌套的样式信息。

@media 可以放置在样式表中的任意位置,也可以放置于其它 @规则中,如下:

  1. @media all and (min-width: 1280px) {
  2. /* 宽度大于1280 */
  3. }
  4. @media
  5. (-webkit-min-device-pixel-ratio: 1.5),
  6. (min-resolution: 2dppx) {
  7. /* Retina屏幕 */
  8. }
  9. @media print {
  10. /* 打印 */
  11. }
  12. @media \0screen\,screen\9 {
  13. /* IE7,IE8 */
  14. }
  15. @media screen\9 {
  16. /* IE7*/
  17. }
  1. /*当页面宽度大于1000px且小于1200px的时候执行,1000-1200*/
  2. @media screen and (min-width:1000px) and (max-width: 1200px){
  3. body{
  4. font-size:16px
  5. }
  6. }
  7. /*当页面宽度大于1280px且小于1366px的时候执行,1280-1366*/
  8. @media screen and (min-width:1280px) and (max-width: 1366px){
  9. body{
  10. font-size:18px
  11. }
  12. }
  13. /*当页面宽度大于1440px且小于1600px的时候执行,1440-1600*/
  14. @media screen and (min-width:1440px) and (max-width:1600px){
  15. body{
  16. font-size:20px
  17. }
  18. }
  19. /*当页面宽度大于1680px且小于1920px的时候执行,1680-1920*/
  20. @media screen and (min-width:1680px) and (max-width:1920px){
  21. body{
  22. font-size:22px
  23. }
  24. }

响应式宽度

min-width: 600px

元素的最小宽度,当小于min-width的时候宽度就等于min-width,

max-width: 1200px

元素的最大宽度,当大于max-width的时候显示max-width的宽度,小于max-width就继承父元素的宽度

媒体查询做响应式案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. body,ul,li{
  10. margin: 0;
  11. padding: 0;
  12. list-style: none;
  13. }
  14. .container{
  15. max-width: 980px;
  16. padding: 15px;
  17. margin: 0 auto;
  18. }
  19. header,footer{
  20. background-color: aqua;
  21. }
  22. .header__ul{
  23. overflow: hidden;
  24. }
  25. .header__ul>li{
  26. float: left;
  27. }
  28. .header__xsul{
  29. display: none;
  30. }
  31. main{
  32. overflow: hidden;
  33. }
  34. .left,.right{
  35. float: left;
  36. height: 200px;
  37. width: 30%;
  38. background-color: antiquewhite;
  39. }
  40. .center{
  41. float: left;
  42. height: 200px;
  43. width: 40%;
  44. background-color:blue;
  45. }
  46. header>button:focus + ul{
  47. display: block;
  48. }
  49. @media screen and (max-width:768px) {
  50. .left,.right,.center{
  51. width: 100%;
  52. }
  53. .hide-pc{
  54. display: none;
  55. }
  56. }
  57. @media screen and (min-width:769px) {
  58. .hide-xs{
  59. display: none;
  60. }
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <header class="container">
  66. <ul class="hide-pc header__ul">
  67. <li>nav1</li>
  68. <li>nav1</li>
  69. <li>nav1</li>
  70. <li>nav1</li>
  71. <li>nav1</li>
  72. </ul>
  73. <button class="hide-xs">导航</button>
  74. <ul class="header__xsul">
  75. <li>nav1</li>
  76. <li>nav1</li>
  77. <li>nav1</li>
  78. <li>nav1</li>
  79. <li>nav1</li>
  80. </ul>
  81. </header>
  82. <main class="container">
  83. <aside class="left">left</aside>
  84. <section class="center">center</section>
  85. <aside class="right">right</aside>
  86. </main>
  87. <footer class="container">footer</footer>
  88. </body>
  89. </html>


0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3