Flex12

Помогите разобраться. (разрешение экрана)

Recommended Posts

Всем привет. У меня при верстке сайта по уроку возникла проблема. Сверстал все один в один (перепроверил несколько раз), но по итогу получается смещение элементов. Из за чего такое может произойти? Ссылку на скрин оставлю ниже (1левый экран то как у него, а (2)правый то как у меня) Скрин для наглядности, чтобы понять о чем я.

Spoiler

https://ibb.co/88wDBzq

 

Share this post


Link to post
Share on other sites

Здравствуйте

Смещение элементов будет присутствовать если допускается отличия в ширине окна браузера и динамическое смещение элементов. Скорей всего, если макет был сверстан PixelPerfect, то при ширине окна равной ширине макета все элементы будет на своих местах

Share this post


Link to post
Share on other sites
8 hours ago, klierik said:

Здравствуйте

Смещение элементов будет присутствовать если допускается отличия в ширине окна браузера и динамическое смещение элементов. Скорей всего, если макет был сверстан PixelPerfect, то при ширине окна равной ширине макета все элементы будет на своих местах

Простите еще раз за глупый вопрос, но как тогда верстают по макету, при маленьком разрешении экрана? Просто я не особо это понимаю. Получается что из макета (psd) верстают под свой экран? А далее уже происходит резиновая верстка? Но как тогда брать расстояние между блоками? Очень стыдно за столь глупые вопросы😅, но не знаю как такой вопрос сформулировать для гугла, чтобы почитать про это.

Share this post


Link to post
Share on other sites

Очень просто — используют PixelPerfect под конкретную ширину экрана. При увеличении ширины экрана расстояние между элементами и/или размеры элементов адаптируются под ширину экрана.

В любом случае многое зависит от задач заказчика.

Share this post


Link to post
Share on other sites
2 hours ago, klierik said:

Очень просто — используют PixelPerfect под конкретную ширину экрана. При увеличении ширины экрана расстояние между элементами и/или размеры элементов адаптируются под ширину экрана.

В любом случае многое зависит от задач заказчика.

Спасибо Вам большое за помощь!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Okieazy
      Первый проект: http://okitonori.ru/portfolio/mogo/index.html
      Второй проект: http://okitonori.ru/portfolio/activebox/index.html

      Прошу строгой критики.
      Больше всего интересует качество кода. Допустил ли я какие-нибудь критические ошибки. Возможно, я из-за раза в раз пишу что-то неправильно.
      Буду очень благодарен!
    • By dron
      Всем привет. Никак не получается сверстать нормальную Pricing Table на Uikit 3. Я только вникаю в тему, поэтому, может еще не догоняю.
      Пробую сделать на uk-flex + uk-table. Постоянно какие-то косяки то с адаптивностью, то с шириной, то с высотой колонок...
      <div class="uk-flex uk-flex-center"> <div class="uk-card uk-card-default"> <table class="uk-table uk-table-divider bg1"> <thead> <tr> <th>Тестовая таблица 1</th> </tr> </thead> <tbody> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 2 пошире</td> </tr> <tr> <td>Поле 3 еще шире чем поле 1 и 2</td> </tr> <tr> <td>Тестируем поле 4, которое воообще широкое</td> </tr> <tr> <th>100008 руб</th> </tr> </tbody> </table> </div> <div class="uk-card uk-card-default uk-margin-left"> <table class="uk-table uk-table-divider bg1"> <thead> <tr> <th>Тестовая таблица 2, таблица 2, таблица 3</th> </tr> </thead> <tbody> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 2</td> </tr> <tr> <td>Поле 3</td> </tr> <tr> <td>Поле 4</td> </tr> <tr> <td>А тут есть еще поле 4</td> </tr> <tr> <td>А еще поле 6, которое шире других</td> </tr> <tr> <th>12 000 ₽</th> </tr> </tbody> </table> </div> <div class="uk-card uk-card-default uk-margin-left"> <table class="uk-table uk-table-divider bg1"> <thead> <tr> <th>А тут таблица номер 3</th> </tr> </thead> <tbody> <tr> <td>Поле 1</td> </tr> <tr> <td>Широкое поле 2 из таблицы 3</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <th>9 000 ₽</th> </tr> </tbody> </table> </div> </div>
      И как на зло не могу ничего найти подходящего уже готового. Ни в шаблонах на Uikit, ни в документации... Кто-то верстал Pricing Table на Uikit 3? Можете помочь, показать свой код?

      Заранее спасибо!

  • Member Statistics

    46,617
    Total Members
    3,128
    Most Online
    Senobiot
    Newest Member
    Senobiot
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.