Попытка устранить ошибку окна просмотра сетки RWD - PullRequest
Новая
       10

Попытка устранить ошибку окна просмотра сетки RWD

0 голосов
/ 08 февраля 2020

Я пытался поэкспериментировать с макетом сетки, после того, как следовал руководству w3schools о том, как сделать макет сетки. Независимо от того, что я делаю, все строки отображают 100% по всему окну просмотра. Я сделал несколько строк и разделил их на разные комбинации столбцов, и ничего не получится.

A Кодовая ссылка кода. 

<div class="row">
    <div class="col-6, sec1">Content</div>
    <div class="col-6, sec2">Content</div>
</div>

[class*="col-"] {
    width:100%;
    float:left;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

@media only screen and (min-width:768;){
    /*Desktops*/
    .col-1{width:8.33%;}
    .col-2{width:16.66%;}
    .col-3{width:25%;}
    .col-4{width:33.33;}
    .col-5{width:41.66;}
    .col-6{width:50%;}
    .col-7{width:58.33%;}
    .col-8{width:66.66%;}
    .col-9{width:75%;}
    .col-10{width:83.33%;}
    .col-11{width:91.66%;}
    .col-12{width:100%;}
}

Ответы [ 2 ]

1 голос
/ 08 февраля 2020

Я заметил две ошибки в вашем коде:

  1. Имена классов <div class="col-6,sec1"> , но это должно быть <div class="col-6 sec1">
  2. Медиа-запрос определяется как @media only screen and (min-width:768;) но это должно быть @media only screen and (min-width:768px)
1 голос
/ 08 февраля 2020

Ну, во-первых, вам нужно понять основы классов html и css, css, внутри тега html они разделены пробелом NOT запятой, зная, что давайте go к коду.

  1. Вы используете запятые для разделения классов, как уже упоминалось 
<div class="col-6 sec1">Use classes like this!</div>
<div class="col-6, sec1">Do NOT use classes like this!</div>
Внутри вашего селектора вы забыли установить минимальную высоту, в противном случае существует риск того, что некоторые ваши столбцы в зависимости от объявления не появятся. 
[class*="col-"] {
    width: 100%;
    float: left;
    min-height: 1px;
}
При объявлении медиазапросов вы должны угрожать ему, как и любому другому юниту. Вы забыли устройство в min-width: 768. 
@media only screen and (min-width:768px){
    // Do your media
}
Хак с открытым кодом, который вы используете в своем классе .row, не забудьте добавить остальные правила для before и его собственный класс. Есть этот микро-хакфиксный хак , на который вы можете взглянуть. 
.row {
    *zoom: 1;
}

.row::after {
  content: " ";
  display: table;
  clear: both;
}

.row::before {
  content: " ";
  display: table;
}

СОВЕТ: Если вы посмотрите на некоторые css фреймворки большинство из них имеют разные имена столбцов для точек останова, например col-lg- для больших устройств col-md- для средних устройств. Будет лучше, если вы примете эту практику при создании некоторого макета столбца.

Взгляните на этот jsFiddle , где я сделал несколько отзывчивых столбцов.

...