6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

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

2022-04-28 0 45 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