2022-04-28 0 45 web前端社区
<!DOCTYPE html>
<html>
<head>
<style>
.box{
position: relative;
margin: 300px auto;
width: 250px;
height: 250px;
transform-style: preserve-3d;
border: 1px solid gray;
transform: rotateX(-42deg) rotateY(-24deg) scaleZ(0.8);
transition: transform 5s;
}
.box:hover{
transform: rotateX(360deg) rotateY(360deg);
}
.box > div{
position: absolute;
width: 250px;
height: 250px;
text-align: center;
line-height: 250px;
font-size: 100px;
}
.left{
transform: translateX(-50%) rotateY(90deg);
background-color: rgba(199, 173, 69);
}
.right{
transform: translateX(50%) rotateY(90deg);
background-color: rgb(177, 199, 69);
}
.front{
transform: translateZ(125px);
background-color: rgb(69, 199, 169);
}
.backend{
transform: translateZ(-125px);
background-color: rgb(69, 147, 199);
}
.top{
transform: translateY(-50%) rotateX(90deg);
background-color: rgb(123, 69, 199);
}
.bottom{
transform: translateY(50%) rotateX(90deg);
background-color: rgb(173, 53, 145);
}
</style>
</head>
<body>
<div class="box">
<div class="front">前</div>
<div class="backend">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
</div>
</body>
</html>
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
not, and, 和 only 可用于联合构造复杂的媒体查询,您还可以通过用逗号分隔多个媒体查询,将它们组合为一个规则。
not, only 和 and 关键字含义:
媒体类型(Media types)描述设备的一般类别。除非使用 not 或 only 逻辑操作符,媒体类型是可选的,并且会(隐式地)应用 all 类型。
你也可以针对不同的媒体使用不同样式文件 :
<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....
值 | 描述 |
---|---|
all | 用于所有设备 |
aural | 已废弃。用于语音和声音合成器 |
braille | 已废弃。 应用于盲文触摸式反馈设备 |
embossed | 已废弃。 用于打印的盲人印刷设备 |
handheld | 已废弃。 用于掌上设备或更小的装置,如PDA和小型电话 |
用于打印机和打印预览 | |
projection | 已废弃。 用于投影设备 |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
tty | 已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备 |
tv | 已废弃。 用于电视和网络电视 |
@media 用来根据一个或多个媒体查询的结果来应用样式表的某一部分(花括号中的样式信息),使用 @media 您可以指定一组媒体查询和一个 CSS 样式块,当且仅当媒体查询与正在使用的设备匹配时,指定的 CSS 样式才会应用于文档。
媒体查询是用于判断设备信息的一组条件,如设备的宽高值,宽高比,颜色,分辨率等,当条件匹配时,才会执行其内嵌套的样式信息。
@media 可以放置在样式表中的任意位置,也可以放置于其它 @规则中,如下:
@media all and (min-width: 1280px) {
/* 宽度大于1280 */
}
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 2dppx) {
/* Retina屏幕 */
}
@media print {
/* 打印 */
}
@media \0screen\,screen\9 {
/* IE7,IE8 */
}
@media screen\9 {
/* IE7*/
}
/*当页面宽度大于1000px且小于1200px的时候执行,1000-1200*/
@media screen and (min-width:1000px) and (max-width: 1200px){
body{
font-size:16px
}
}
/*当页面宽度大于1280px且小于1366px的时候执行,1280-1366*/
@media screen and (min-width:1280px) and (max-width: 1366px){
body{
font-size:18px
}
}
/*当页面宽度大于1440px且小于1600px的时候执行,1440-1600*/
@media screen and (min-width:1440px) and (max-width:1600px){
body{
font-size:20px
}
}
/*当页面宽度大于1680px且小于1920px的时候执行,1680-1920*/
@media screen and (min-width:1680px) and (max-width:1920px){
body{
font-size:22px
}
}
min-width: 600px
元素的最小宽度,当小于min-width的时候宽度就等于min-width,
max-width: 1200px
元素的最大宽度,当大于max-width的时候显示max-width的宽度,小于max-width就继承父元素的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.container{
max-width: 980px;
padding: 15px;
margin: 0 auto;
}
header,footer{
background-color: aqua;
}
.header__ul{
overflow: hidden;
}
.header__ul>li{
float: left;
}
.header__xsul{
display: none;
}
main{
overflow: hidden;
}
.left,.right{
float: left;
height: 200px;
width: 30%;
background-color: antiquewhite;
}
.center{
float: left;
height: 200px;
width: 40%;
background-color:blue;
}
header>button:focus + ul{
display: block;
}
@media screen and (max-width:768px) {
.left,.right,.center{
width: 100%;
}
.hide-pc{
display: none;
}
}
@media screen and (min-width:769px) {
.hide-xs{
display: none;
}
}
</style>
</head>
<body>
<header class="container">
<ul class="hide-pc header__ul">
<li>nav1</li>
<li>nav1</li>
<li>nav1</li>
<li>nav1</li>
<li>nav1</li>
</ul>
<button class="hide-xs">导航</button>
<ul class="header__xsul">
<li>nav1</li>
<li>nav1</li>
<li>nav1</li>
<li>nav1</li>
<li>nav1</li>
</ul>
</header>
<main class="container">
<aside class="left">left</aside>
<section class="center">center</section>
<aside class="right">right</aside>
</main>
<footer class="container">footer</footer>
</body>
</html>
Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3