Comment définir des styles CSS pour différentes résolutions-Questions et réponses frontales-php.cn

Comment définir des styles CSS pour différentes résolutions

青灯夜游

Libérer： 2023-01-11 09:19:56

original

5560 Les gens l'ont consulté

En CSS, vous pouvez utiliser la règle "@media" pour définir des styles pour différentes résolutions en fonction de différentes tailles d'écran, avec la syntaxe "@media mediatype and|not|only (media feature){css style}".

Comment définir des styles CSS pour différentes résolutions

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser la règle "@media" pour définir des styles pour différentes résolutions.

À l'aide de la requête @media, vous pouvez définir différents styles pour différents types de médias. La syntaxe de la requête @media :

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

Copier après la connexion

Exemple :

/* 设置了浏览器宽度小于1600px时的样式 */
@media screen and (max-width: 1600px) {
    .select2-container{
        width:328px !important;
    }
    #address{
        width:calc(37% - 3px) !important;
    }
}
/* 设置了浏览器宽度小于1367px时的样式 */
@media screen and (max-width: 1367px) {
    .select2-container{
        width:275px !important;
    }
    #address{
        width:calc(36% + 3px) !important;
    }
}

Copier après la connexion

On peut voir que : @media peut définir différents styles pour différentes tailles d'écran, surtout si vous devez configurer une page responsive, @media est très utile. Lorsque vous réinitialisez la taille du navigateur, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur.

Exemple :

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>无标题文档</title>
        <style>
            .abc {
                height: 300px;
                border: 1px solid #000;
                margin: 0 auto
            } //可以去掉边框
            @media screen and (min-width: 1201px) {
                .abc {
                    width: 1200px
                }
            }
            /* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
             
            @media screen and (max-width: 1200px) {
                .abc {
                    width: 900px
                }
            }
            /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
             
            @media screen and (max-width: 900px) {
                .abc {
                    width: 200px;
                }
            }
            /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
             
            @media screen and (max-width: 500px) {
                .abc {
                    width: 100px;
                }
            }
            /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
        </style>
        <!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->
    </head>
 
    <body>
        <div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
    </body>
 
</html>