Flexbox для мобильного выпуска - PullRequest
Новая
       0

Flexbox для мобильного выпуска

0 голосов
/ 06 апреля 2020

Я создал следующую скрипку.

Fiddle 

    <span class="item__collection">
        <button class="item__button">1</button>
        <button class="item__button">2</button>
        <button class="item__button">3</button>
        <button class="item__button">4</button>
        <button class="item__button">5</button>
        <button class="item__button">6</button>
        <button class="item__button">7</button>
        <button class="item__button">8</button>
        <button class="item__button">9</button>
        <button class="item__button">10</button>
    </span>

<style>    
.item__collection {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1024px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 
  Device = Mobiles (Landscape), Tablets, Ipads, Laptops, Desktops
  Screen = from 481px and above
*/
@media (min-width: 481px) {
  .item__collection{
    flex-flow: row wrap;
  }
}

.item__button {
  height: 150px;
  flex: 100%;
  margin-top: 2px;
  margin-bottom: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4em;
  border: 1px dotted gainsboro;
  cursor: pointer;
  background: transparent;
  border-radius: 3px;
}
.item__button:focus {
  border: none;
  outline: none;
}

.item__button:hover {
  border: none;
  background: gainsboro;
}

/*
  Device = Laptops, Desktops
  Screen = from 1025px to higher resolution desktops
*/
@media (min-width: 1025px) {
  .item__button {  
    flex: 33%;   
  }
}

/* 
  Device = Mobiles (Landscape), Tablets, Ipads 
  Screen = from 481px to 1024px
*/
@media (min-width: 481px) and (max-width: 1024px) {
  .item__button {
    flex: 49%;   
  }
}
</style>

У меня есть ограничение, что на мобильных устройствах сетка будет отображать 1 номер в строке. На планшетных устройствах 2 номера в строке, а на настольных и больших устройствах 3 номера в строке. Вам решать, как вы определяете «мобильный», если это разумно.

Над скрипкой корректно работает на мобильных и планшетных ПК - но на мобильных устройствах, он отображает 2 числа в строке.

Любая помощь очень ценится

1 Ответ

1 голос
/ 06 апреля 2020

Вам нужно добавить метатег в вашу голову, чтобы мобильный медиа-запрос работал: 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


        body{
            margin: 0;
            padding: 0;
            font-size: 14px;
        }


        .item__collection {
          display: flex;
          flex-direction: column;
          margin: 0 auto;
          max-width: 1024px;
          -webkit-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }



        .item__button {
          height: 150px;
          flex: 100%;
          margin-top: 2px;
          margin-bottom: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 4em;
          border: 1px dotted gainsboro;
          cursor: pointer;
          background: transparent;
          border-radius: 3px;
        }
        .item__button:focus {
          border: none;
          outline: none;
        }

        .item__button:hover {
          border: none;
          background: gainsboro;
        }

        @media screen and (min-width: 481px) {
          .item__collection{
            flex-flow: row wrap;
          }
        }

        @media screen and (min-width: 1025px) {
          .item__button {  
            flex: 33%;   
          }
        }


        @media screen and (min-width: 768px) and (max-width: 1024px) {
          .item__button {
            flex: 49%;   
          }
        }


        @media screen and (max-width: 767px) {
          .item__button {
            flex: 100%;   
          }
        }
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Document</title>

</head>
<body>

<span class="item__collection">
    <button class="item__button">1</button>
    <button class="item__button">2</button>
    <button class="item__button">3</button>
    <button class="item__button">4</button>
    <button class="item__button">5</button>
    <button class="item__button">6</button>
    <button class="item__button">7</button>
    <button class="item__button">8</button>
    <button class="item__button">9</button>
    <button class="item__button">10</button>
</span>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...