Создание сетки в CSS для мобильных устройств

Question

Я делаю свою сетку в CSS. Я написал для него следующий код, и он работает нормально. Но я хочу знать, как сделать этот макет более гибким для мобильных устройств размером менее 600 пикселей. Ниже приведен фрагмент кода.

.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` 

Пожалуйста, помогите мне.

Answer 1

Чтобы сделать работу с различными размерами, вы должны использовать медиа-запросы. Подробнее: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

На данный момент я знаю о двух методов работы:

1) манипуляции класса: перезаписать атрибуты класса, где подобран запрос СМИ, например:

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

В html он хотел бы, как класс = "col-5"

Преимущества: проще поддерживать, только один класс, чтобы добавить

Недостатки: вы не можете установить различный размер для каждого экрана ширина

---

2) различных классов для различных размеров и ныряет, как:

@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 
} 

в HTML он хотел бы, например, как класса = "Col-5 Col-MOB-3"

Преимущества: вы можете даже изменить размер на каждой точки останова

Недостатки: Наиболее многословные

---

Общие точки останова для меня являются:

- до 320? mob портрет: @media только экран и (максимальная ширина: 320 пикселей) {}

- до 480? mob пейзаж: @media только экран и (максимальная ширина: 480px) {}

- до 680? мини-вкладка + ландшафт: только экран @media и (максимальная ширина: 680 пикселей) {}

- до 810? Таблетки и Facebook: @media только экран и (максимальная ширина: 810px) {}

- до 1024? Компьютер: @media только экран и (максимальная ширина: 1024px) {}

- до 1280?Большой экран: @media только экран и (макс-ширина: 1280px) {}

Вот пример: http://socialtab.it/beta/chiusagrande/public/css/grid.css

Для других являются: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

---

советы:

Используйте, если возможно,%, он будет выглядеть лучше. Установите max-width: 100% на столбцы, чтобы предотвратить переполнение, если вы используете сетку «пиксель» (не%, жидкость). Для контейнера я люблю этот набор:

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

Я просто обучение, как вы: D

Извините за плохой английский, я старался изо всех сил D:

Answer 2

/* 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 */ 
}