Настроенная ответная сетка

Question

Фоновая картинка: Я пытаюсь создать мобильный сайт, отвечающий самым быстрым действиям. При этом я создаю свою собственную систему сетки (3 макета столбца).

Я использую min media-запросы, чтобы изменить размер каждого столбца в зависимости от размера области просмотра.

---

Вопрос: ли это лучший способ для решения этой проблемы? то есть переопределения% ширины каждого столбца в зависимости от размера видового экрана?

Мне было интересно, если это «подход Boostrap» ИЛИ если есть более эффективный способ создания ширины столбцов/сетки?

---

Код: Каждый столбец в сетке присваивается = один из перечисленных ниже классов.

.span_2_of_2 { 
    width: 100%; 
} 

.span_1_of_2 { 
    width: 49.2%; 
} 


/* 3 COLUMN */ 

.span_3_of_3 { 
    width: 100%; 
} 

.span_2_of_3 { 
    width: 66.13%; 
} 

.span_1_of_3 { 
    width: 32.26%; 
} 


@media screen and (min-width: 300px) { 

.span_1_of_2, .span_1_of_3, .span_2_of_3, .span_3_of_3, 
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { 
    width: 100%; 
} 

.col 
{ 
    margin: 1.9% 0; 

} 
} /*/mediaquery*/ 



@media screen and (min-width: 580px) { 


.col { 
    margin: 0% 0 9% 1%; /* Spaces Columns */ 
} 

.span_1_of_2 { 
    width: 49.2%; 
    position: relative; 
} 

.span_1_of_3 { 
    width: 32.26%;  
} 
} /*/mediaquery* 

Большое спасибо,

Answer 1

Вы создали сетку, затем перезаписаны его с мин-ширина носителя запроса на 300px, которая собирается быть почти все устройства, так что первый набор стилей вы написали почти всегда будут игнорироваться.

Я беру это из вашего кода, вы ищете сетку, чтобы набрать ширину 560 пикселей - это работает, хотя вам нужно добавить float влево и немного изменить ваши проценты.

Я быстро восстановлены код немного:

<div class="col first span_1_of_3 blue">&nbsp;</div> 
<div class="col span_1_of_3 red">&nbsp;</div> 
<div class="col span_1_of_3 green">&nbsp;</div> 

/* Temporary styles for the example */ 
.blue { 
    background: blue; 
    min-height: 120px; 
} 

.red { 
    background: red; 
    min-height: 120px; 
} 

.green { 
    background: green; 
    min-height: 120px; 
} 

/* The Grid */ 

/* Start at mobile and move up using min-width queries */ 
.span_1_of_2, .span_1_of_3, .span_2_of_3, .span_3_of_3, 
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { 
    width: 100%; 
} 

/* First breakpoint is 580px */ 
@media screen and (min-width: 580px) { 

.col { 
    float: left; 
    margin: 0 0 20px 1%; /* Spaces Columns */ 
} 

.first { 
    margin-left: 0; 
} 

/* Two columns */ 
.span_1_of_2 { 
    width: 49%; 
} 

.span_2_of_2 { 
    width: 100%; 
} 

/* Three columns */ 
.span_3_of_3 { 
    width: 100%; 
} 

.span_2_of_3 { 
    width: 65.3%; 
} 

.span_1_of_3 { 
    width: 32.65%; 
} 

} /* End media query */ 

CodePen старого кода здесь: http://codepen.io/simoncmason/pen/GgQPRa CodePen нового кода здесь: http://codepen.io/simoncmason/pen/yyvGyg

Все колонки 100% шириной до экрана шириной 560px , тогда медиа-запрос запускает и разбивает его на столбцы заданной ширины.

Я добавил первый класс, чтобы удалить левое поле из первого столбца.

Я изменил нижний предел от процента к px для большей согласованности.

Я немного перепутал ширины столбцов, хотя для производственной площадки они нуждаются в рафинировании.