Une brève discussion sur la différence entre la largeur et la largeur du périphérique CSS3

Cet article vous parlera de la différence entre la largeur de l'appareil et la largeur dans les requêtes multimédias CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Tutoriel recommandé : Tutoriel vidéo CSS]

1.device-width

Définition : Définissez la largeur visible de l'écran du périphérique de sortie.

Que votre page Web soit ouverte dans Safari ou intégrée dans une vue Web, la largeur de l'appareil est uniquement liée à votre appareil. S'il s'agit du même appareil, sa valeur ne changera pas.

Par exemple, la largeur de l'appareil*la hauteur de l'appareil de l'iPhone6 ​​​​est de 375*667, ce qui n'a rien à voir avec son dpr, etc.

2.width

Définition : Définit la largeur de la zone visible de la page dans le périphérique de sortie.

La sortie est la largeur et la hauteur de la zone visible de votre page Web. En supposant que votre page Web soit une page Web mobile imbriquée dans une vue Web, la largeur est en fait la largeur et la hauteur de la vue Web. dans différents navigateurs, la largeur et la hauteur peuvent également être différentes, et si votre page utilise la disposition rem, et pour les écrans Retina, dpr>1, content="width=device-width, initial-scale=0.5, est défini dans la balise méta . minimum-scale=0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover", la largeur de votre iPhone 6 sera de 750 pixels.

J'utilise davantage la largeur et la hauteur de l'appareil ici, car il n'est pas nécessaire de prendre en compte la situation de l'écran horizontal

Par exemple, si vous vous adaptez à l'iphoneX, vous connaissez déjà l'iphoneX ( 375 *812), vous pouvez utiliser la déclaration suivante :

/*iphone x*/
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .foriphoneX()
}

Un autre exemple est le dernier écran pliable Samsung

@media screen and (device-width: 586px) and (device-height: 820px){
    html{
        font-size: 110px !important;
    }
}

En bref, la largeur de l'appareil ne changera pas dans un appareil, c'est la valeur est liée à la largeur de l'appareil. La largeur peut être différente lorsqu'elle est affichée dans différents schémas de mise en page ou dans différents conteneurs. Ici, je pense que la largeur de l'appareil est équivalente à window.screen.width de js, et la largeur est équivalente au document de. js.body.clientWidth.

De plus, j'enregistrerai ici la situation d'adaptation de l'écran pliable de Huawei. Puisqu'il n'y a pas de vraie machine pour le moment, je sais seulement que la résolution de l'état déplié de Huawei est de 2200*2480. il n'y a pas de DPR ou quelque chose comme ça. C'est clair, donc je ne connais pas la largeur et la hauteur du périphérique (je ne peux pas utiliser la largeur pour les requêtes, la raison est liée à la logique métier), j'ai donc choisi l'aspect du périphérique. -ratio,

Au début, I Ceci est écrit comme ça en less

@media (device-aspect-ratio: 55/62) {
    /*适配*/
}

Ensuite, le rapport d'aspect de l'appareil en CSS est calculé sous forme décimale

@media (device-aspect-ratio: 0.887097) {
    /*适配*/
}

device- aspect-ratio ne prend pas en charge les décimales, il ne peut donc pas correspondre

J'ai donc vérifié comment empêcher less d'exécuter des résultats 55/62, et j'ai trouvé qu'il suffisait de mettre l'attribut entre guillemets et d'ajouter un tilde devant de celui-ci, comme ceci :

@media (device-aspect-ratio: ~"55/62") {
    /*适配部分*/
}

Problème résolu !

Cependant, le ratio d'aspect de l'appareil n'est plus recommandé sur MDN. Cet attribut sera abandonné si je trouve une meilleure solution, j'utiliserai une alternative.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!