web-dev-qa-db-fra.com

Requêtes de média CSS pour les tailles d'écran

J'essaie actuellement de concevoir une mise en page compatible avec plusieurs tailles d'écran. Les tailles d'écran pour lesquelles je conçois sont énumérées ci-dessous:

Taille de l'écran:

  1. 640x480
  2. 800x600
  3. 1024x768
  4. 1280x1024 (et plus grand)

Ce qui me pose problème, c’est de créer les requêtes de média css3, de sorte que ma disposition change lorsque la largeur de la fenêtre atteint l’une de ces largeurs. Vous trouverez ci-dessous un exemple des requêtes que j'utilise actuellement dans les médias, mais cela ne fonctionne pas pour moi. Je me demande donc si quelqu'un pourrait m'aider à résoudre ce problème.

<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css">

J'ai essayé de créer une nouvelle série de requêtes multimédia, mais elles ne fonctionnent toujours pas pour moi. Quelqu'un pourrait-il s'il vous plaît aider à expliquer ce que je ne me trompe pas. Plusieurs d'entre vous ont déjà essayé d'expliquer, mais je ne comprends pas. Les nouvelles requêtes multimédia sont affichées ci-dessous:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="css/devices/screen/layout-modify2.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px)" href="css/devices/screen/layout-modify4.css">
htmlcsshtml5css3media-queries
46
JaPerk14

Sauf si vous avez plus de feuilles de style que cela, vous avez gâché vos points de rupture:

#1 (max-width: 700px)
#2 (min-width: 701px) and (max-width: 900px)
#3 (max-width: 901px)

La 3ème requête média est probablement censée être min-width: 901px. Pour le moment, il se superpose aux n ° 1 et n ° 2 et ne contrôle la mise en page que lorsque l’écran a exactement 901 pixels de large.

Modifier pour la question mise à jour:

(max-width: 640px)
(max-width: 800px)
(max-width: 1024px)
(max-width: 1280px)

Les requêtes multimédias ne ressemblent pas aux déclarations catch ou if/else. Si l'une des conditions correspond, il appliquera tous les styles de chaque requête multimédia à laquelle il correspond. Si vous spécifiez uniquement un min-width pour toutes vos requêtes multimédia, il est possible que certaines ou toutes les requêtes multimédias correspondent. Dans votre cas, un périphérique de 640 pixels de large correspond à vos 4 requêtes multimédia, de sorte que toutes les feuilles de style sont chargées. Voici ce que vous recherchez le plus probablement:

(max-width: 640px)
(min-width: 641px) and (max-width: 800px)
(min-width: 801px) and (max-width: 1024px)
(min-width: 1025px)

Maintenant, il n'y a pas de chevauchement. Les styles ne s'appliqueront que si la largeur du périphérique se situe entre les largeurs spécifiées.

43
cimmanon

Mettez tout cela dans un seul document et utilisez ceci:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
  /* Styles */
}

/* iPhone 4 - 5s ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}

/* iPhone 6 ----------- */
@media
only screen and (max-device-width: 667px) 
only screen and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+ ----------- */
@media
only screen and (min-device-width : 414px) 
only screen and (-webkit-device-pixel-ratio: 3) {
  /*** You've spent way too much on a phone ***/
}

/* Samsung Galaxy S7 Edge ----------- */
@media only screen
and (-webkit-min-device-pixel-ratio: 3),
and (min-resolution: 192dpi)and (max-width:640px) {
 /* Styles */
}

Source: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

À ce stade, je considérerais certainement d’utiliser des valeurs de em à la place de pixels. Pour plus d'informations, consultez ce message: https://zellwk.com/blog/media-query-units/ .

83
Oliver Tappin

Utilisez ce format de requête multimédia pour tous les smartphones et les grands écrans

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) {
/* Styles */
}



/* Smartphones (portrait) ----------- */

@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/**********
iPad 3
**********/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* Desktops and laptops ----------- */

@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
1
Mohit Singh