网站开发进阶（六十八）CSS3媒体查询@media_css @media only

最新推荐文章于 2024-07-21 23:31:42 发布

2401_84618790

最新推荐文章于 2024-07-21 23:31:42 发布

阅读量329

点赞数 5

文章标签： css css3 媒体

本文链接：https://blog.csdn.net/2401_84618790/article/details/139837522

版权

在CSS中，@media规则可置于代码的顶层或位于其它任何@条件规则组内。

媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询结果为true。

<!DOCTYPE html>
<html>
	<head>
	    <meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>无标题文档</title>
	</head>
<style>
 @media (max-width:5000px)
 {
 body{
 margin:0 auto;
 width:1000Px;
 }
 .left{
 float:left;
 width:450px;
 height:1200px;
 margin-left:25px;
 margin-right:25px;
 background-color:#99FFCC;
 }
 .right{
 float:right;
 width:450px;
 height:1200px;
 margin-left:25px;
 margin-right:25px;
 background-color:#FFFF99;
 }
 .rtop{
 width:450px;
 height:150px;
 background-color:#CCFFFF;
 padding:0;
 position:absolute;
 left:auto;
 top:250px;
 font-size:14px;
 line-height:21px;
 text-align:center;
 overflow:hidden;
 } 
 .rcenter{
 width:450px;
 height:150px;
 background-color:#CCFFFF;
 position:absolute;ss
 left:auto;
 top:650px;
 text-align:center;
 overflow:hidden;
 }
 .rbottom{
 width:450px;
 height:150px;
 background-color:#CCFFFF;
 padding:0;
 position:absolute;
 left:auto;
 top:1050px;
 font-size:20px;
 line-height:30px;
 text-align:center;
 overflow:hidden;
 }
 }
 
 @media screen and(min-width:750px) and (max-width:1000px)
 {
 body{
 margin:0 auto;
 width:750Px;
 }
 .left{ 
 float:left;
 width:350px;
 height:900px;
 margin-right:25px;
 background-color:#99FFCC;
 }
 .right{
 float:right;
 width:350px;
 height:900px;
 margin-left:25px;
 background-color:#FFFF99;
 }
 .rtop{
 width:350px;
 height:100px;
 background-color:#CCFFFF;
 padding:0;
 position:absolute;
 left:auto;
 top:200px;
 font-size:14px;
 line-height:21px;
 text-align:center;
 overflow:hidden;
 }
 .rcenter{
 width:350px;
 height:100px;
 background-color:#CCFFFF;
 position:absolute;
 left:auto;
 top:500px;
 text-align:center;
 overflow:hidden;
 }
 .rbottom{
 width:350px;
 height:100px;
 background-color:#CCFFFF;
 position:absolute;
 left:auto;
 top:800px;
 font-size:20px;
 line-height:30px;
 text-align:center;
 overflow:hidden;
 }
 }
 
 @media screen and (min-width: 320px) and (max-width: 750px)
 {
 body{
 margin:0 auto;
 width:320Px;
 }
 .left{
 margin:0 auto;
 width:320px;
 height:300px;
 background-color:#99FFCC;
 }
 .right{
 margin:0 auto;
 width:320px;
 height:900px;
 background-color:#FFFF99;
 }
 .rtop{
 width:320px;
 height:100px;
 background-color:#CCFFFF;
 padding:0;
 position:absolute;
 left:auto;
 top:500px;
 font-size:14px;
 line-height:21px;
 text-align:center;
 overflow:hidden;
 }
 .rcenter{
 width:320px;
 height:100px;
 background-color:#CCFFFF;
 position:absolute;
 left:auto;
 top:800px;
 text-align:center;
 overflow:hidden;
 } 
 .rbottom{
 width:320px;
 height:100px;
 background-color:#CCFFFF;
 position:absolute;
 left:auto;
 top:1100px;
 font-size:20px;
 line-height:30px;
 text-align:center;
 overflow:hidden;
 }
 }
</style>
<body>
    <div class="left"></div>
    <div class="right">
        <div class="rtop">
	        <p>这是第一段文字这是第一段文字这是第一段文字
	        这是第一段文字这是第一段文字这是第一段文字
	        这是第一段文字这是第一段文字这是第一段文字
	        这是第一段文字这是第一段文字这是第一段文字</p>
        </div>
        
        <div class="rcenter">
	        <p>这是第二段文字这是第二段文字这是第二段文字
	        这是第二段文字这是第二段文字这是第二段文字
	        这是第二段文字这是第二段文字这是第二段文字
	        这是第二段文字这是第二段文字这是第二段文字</p>
        </div>
        
        <div class="rbottom">
	        <p>这是第三段文字这是第三段文字这是第三段文字
#### 最后更多分享：**前端字节跳动真题解析**

- ![](https://img-blog.csdnimg.cn/img_convert/9207d0f4222f1118fcd37c0bd9994875.webp?x-oss-process=image/format,png)


二段文字
	        这是第二段文字这是第二段文字这是第二段文字</p>
        </div>
        
        <div class="rbottom">
	        <p>这是第三段文字这是第三段文字这是第三段文字
#### 最后更多分享：**前端字节跳动真题解析**

- [外链图片转存中...(img-qtgav02D-1718873652007)]