媒体查询及响应式方法

最新推荐文章于 2024-08-16 08:15:00 发布

qq_42464346

最新推荐文章于 2024-08-16 08:15:00 发布

阅读量459

点赞数

媒体查询：

@media screen and (max-width:1200px){//当小于1200时指定标签隐藏
    .banner-list ul li,.left,.right {
        visibility: hidden;
     }
     
}

将一个页面制作成PC端移动端兼容响应式布局页面，是页面能在不同屏幕大小下呈现处不同最佳显示状态。

主要的过程就是对：

1.将width改为max-width，来适应屏幕的变动来改变自身宽度等。其他亦然。

2.
 /*媒体查询，参考部分Bootstarp框架*/ 
/*当页面大于1200px时，大屏幕，主要显示PC端*/
@media (min-width: 1200px){}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px){}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px){}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px){}
/*在小于480px的屏幕里，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px){}



两边固定中间自适应布局：

第一种：
<div style="width:100%; margin:0 auto;"> 

       <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</div>

       <div style="width:150px; float:left; background:#6FF">这是左侧的内容 固定宽度</div>

       <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中间内容，自适应宽度</div>

    </div>
第二种：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left,.right{
            position: absolute;
            top: 0;
            width: 220px;
            height: 100%;
        }
        .left{
            left: 0;
            background: #00c8c8;
        }
        .right{
            right:0;
            background: pink;
        }
        .main{
            margin: 0 230px;
            height:100%;
        }
    </style>
</head>
<body>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
    <div class="main">主要内容</div>
</body>
</html>