Estoy haciendo mi sistema de cuadrícula en CSS. Escribí el siguiente código y está funcionando bien. Pero quiero saber cómo hacer que este diseño responda a dispositivos móviles de menos de 600 px. El fragmento de código se muestra a continuación.

.grid-container {
    width: 100%;
    max-width: auto;
}

/*-- our cleafix hack -- */
.row:before,.row:after {
    content: "";
    display: table;
    clear: both;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    width: 16.66%;
    /*-- our gutter -- */
    padding: 12px;
    background-color: #FFDCDC;
}

.col-1 {
    width: 16.66%;
}

.col-2 {
    width: 31%;
}

.col-3 {
    width: 48%;
}

.col-4 {
    width: 66.66%;
}

.col-5 {
    width: 83.33%;
}

.col-6 {
    width: 100%;
}

.outline,.outline * {
    outline: 1px solid #F6A1A1;
}

/*-- some extra column content styling --*/
[class*='col-']>p {
    background-color: #FFC2C2;
    padding: 0;
    margin: 0;
    text-align: center;
    color: white;
}`enter code here`

Por favor, ayúdame.

1
Rahul Sah 29 ene. 2015 a las 00:55

2 respuestas

La mejor respuesta

Para que funcione en diferentes tamaños, debe utilizar consultas de medios. Más información: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Por el momento conozco dos métodos de trabajo:

1) Manipulación de clases : sobrescribe los atributos de la clase donde la consulta de medios coincide, por ejemplo:

 @media only screen and (max-width: 600px)  {    //apply if screen is < 600px
      .col-5 { width: 50% }       // overwrite the width of 83.33% to 50%
 }   

En html le gustaría como class = "col-5"

Ventajas : mantenimiento más sencillo, solo una clase para agregar

Desventajas : no puede establecer un tamaño diferente para cada ancho de pantalla


2) Diferentes clases para diferentes tamaños e inmersiones como:

 @media only screen and (max-width: 600px)  {    //apply if screen is < 600px
      .col-mob-3 { width: 50% }   //only if the max-width < 600 set attr
 }

En html, le gustaría, por ejemplo, class = "col-5 col-mob-3"

Ventajas : incluso puede cambiar el tamaño en cada punto de interrupción

Desventajas : más detallado


Los puntos de interrupción habituales para mí son:

- ¿hasta 320? retrato de la mafia : pantalla solo @media y (ancho máximo: 320 px) {}

- ¿hasta 480? paisaje de la mafia : pantalla solo @media y (ancho máximo: 480 px) {}

- ¿hasta 680? mini pestaña + paisaje : pantalla solo @media y (ancho máximo: 680 px) {}

- ¿hasta 810? Tabletas y Facebook : pantalla solo @media y (ancho máximo: 810 px) {}

- ¿hasta 1024? Computadora : pantalla solo @media y (ancho máximo: 1024 px) {}

- ¿Más de 1280? Pantalla grande : pantalla solo @media y (ancho máximo: 1280px) {}

Aquí un ejemplo: http://socialtab.it/beta/chiusagrande/public/css /grid.css

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


Consejos:

Utilice% cuando sea posible, se verá mejor. Establezca max-width: 100% en las columnas para evitar el desbordamiento si está utilizando una cuadrícula de "píxeles" (no%, fluido). Para el contenedor, me encanta este conjunto:

.container {
   width: 1060px;
   max-width: 96%;
   margin: 0 auto;
}

Estoy aprendiendo como tú: D

Perdón por el mal inglés, hice mi mejor esfuerzo D:

0
marc_s 19 jun. 2016 a las 21:19
    /* 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 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
0
mimicode 28 ene. 2015 a las 22:03