Jump to content
  • Sign Up

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


Recommended Posts

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

Spoiler

https://ibb.co/88wDBzq

 

Link to post
Share on other sites

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

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

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

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

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

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

Link to post
Share on other sites

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

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

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

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

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • РоманФ
      By РоманФ
      Выполняю рабочий проект для заказчика
      Встал вопрос как сверстать секцию о нас(будет правильней чтобы верстка не поехала), так как она наслаивается на верхнюю секцию, плюс полупрозрачный border, плюс под ним еще и картинка 
      И как совместить картинки с задними блоками на секции Продукция

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

      Буду рад конструктивным советам, спасибо
       
      Прикладываю макет 
      https://www.figma.com/file/NpCXMgs0oIjLYfuiqzPTJ4/Типография?node-id=11%3A2
    • Full-R
      By Full-R
      В общем свежая безумная идея сделать интерфейс на VPU(view port units) таким образом чтобы избежать media queries.
      Сейчас сделано определение мобильной версии браузера и на CSS4 vars сделаны переключатели масштаба элементов интерфейса.
      Поскольку дизайн полностью масштабируется под размер окна и не нужны ни какие костыли и сетки, я хочу добавить в свой фреймворк такую опцию, как автоматическая генерация Android приложения, которое бы работало на Web View. У нас уже везде webkit и можно было бы сделать заготовку приложения, которая бы скрывала строку ввода адреса браузера, но оставляла возможность поменять URL, на который обращается приложение.
      Я не пишу под андроид и мне бы очень не помешал пример такого приложения с возможностью на сервере через PHP поменять иконку и URL.
      Интерфейс у меня написан полностью динамический на ECMA Script fetch и вместе с SVG графикой весит примерно 300Кб не сжатого сервером кода, что гораздо лучше, чем разрабатывать отдельное приложение для mobile web.
      Мой проект RevolveR CMF: https://revolvercmf.ru/ (сайт сообщества, на котором пока ни чего нет - просто чтобы протестировать интерфейс на VPU и SPAx).
      Видео обзор системы: 
       
       
      Дистрибутив для установки вот здесь: https://github.com/Full-Rx/RevolveR-framework/releases/tag/1.9.2.x
      Группа на facebook тут: https://www.facebook.com/groups/331465761595917
      Фреймворк позиционируется, как замена Drupal и предоставляет широкий спектр функций для создания сайта сообщества.
      Интерфейс написан самостоятельный с чистого листа на ECMA Script 7, а backend реализован на PHP SPL 7.4. Для базы данных реализован мощный кэш с шифрованием и система оптимизирована под высокие нагрузки.
      Сам интерфейс легко меняется с помощью CSS, что позволяет не сильно модифицировать шаблон при создании своей темы оформления.
      Хочу подсказать как лучше реализовать View Port Unit интерфейс, который сейчас работает через calc просто подменяя значение переменной для масштабирования элементов под мобильные устройства. Дело в том, что сейчас уже не нужны ни какие media queries и grids(сетки), а также нет нужды во flex-box так как VPU прекрасно позволяют реализовывать интерфейс для любых дисплеев так, что он смотрится одинокого, как это сделано в операционной системе Windows, например.
       
      Давайте покумекаем, как мы можем это использовать для современных интерфейсов, чтобы сэкономить себе время на создание верстки и дизайна. Мне кажется моя идея выгорает хотя бы экономией времени и денег на создании мобильного приложения. 
       
    • Tempest99
      By Tempest99
      Есть адаптивное меню .mobmenu и кнопка обратной связи .feedback.openform. Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи,чтобы ее нельзя было нажать? И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню. С меню вроде как я справился,но вот как полностью вывести фидбэк на передний план и чтобы при этом чтобы header с гамбургером отошли назад?  https://codepen.io/tempest2708/pen/dyMVoOp


      pornohub-google-chrome-2020-09-04-00-56-15_AYQgL2jv.compressed.mp4
  • Member Statistics

    46,942
    Total Members
    1,451
    Most Online
    johnmesi
    Newest Member
    johnmesi
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • finevpn
      После создания наших тем на форумах, почти везде главным вопрос был: «Почему бесплатно?»  Думаем надо этот вопрос пояснить. Создание и обслуживание VPN серверов в пересчете на одного клиента, не стоит 5$ в месяц. То, что остальные сервисы делают такую стоимость, это на их совести. При хороший оптимизации серверов и сокращении издержек (главная из которых софт и кодеры, но об этом ниже), все выходит очень бюджетно.  Так-же, как вы может заметили, у нас [B]нет своих приложений[/B] , на это есть несколько причин:     1. В приложении проще всего встроить троян или вирус, и сделать из VPN клиента бота для DDOS атак или резиденскую прокси. Для нашего VPN вы можете использовать сторонние в том числе и Open Source решения. Поэтому мы просто технически не может вас использовать в своих целях.     2. Цена конечно же. Разработка приложения для iOS или Windows или любой другой OS, стоит достаточно дорого, и потом еще постоянное обновление приложений и поддержка их в актуальной форме. Мы не хотим делать платный сервис для обычных пользователей и не готовы на себя брать такие расходы. Да, отсутствие приложений немного усложняет работы с нашим VPN, но мы так снижаем издержки и защищаем клиентов от возможности подсадить трояна вам.  За счет того, что мы не тратим деньги на создание и обновления приложений деньги, мы можем себе позволить держать VPN только за donation.  Сейчас у нас в разработке платный продукт (VPN), но для организаций, и в какой-то степени, наш бесплатный VPN для частных лиц, является тестовым и способом пиара 🙂 таким (бесплатным) он и останется в будущем.  Может ли, что-то в жизни быть бесплатно? Многие продукты не берут плату, но монетизируются за donation или за счет работы с бизнесом: Wikipedia, Linux, Mozilla, Open Office, Android, TOR, Telegram (вообще бесплатный и без рекламы) и куча других которыми вы пользуетесь каждый день и даже не думаете об этом. 
    • Tucha
      Спецпредложение "Сколько стоит и как организовать работу сайтов на CMS WordPress, Joomla, Drupal и др. в облаке"   Друзья, если ваш сайт работает на WordPress, Joomla, Drupal, OpenCart или любой другой CMS, тогда акционное предложение от Tucha - именно для вас! Хостинг в облаках надежного провайдера поможет достичь бесперебойной работы веб-проектов и их высокой производительности.   Для сайтов с небольшими и умеренными нагрузками (например, сайта-визитки или лендинга) подойдет облачный хостинг на базе сервиса TuchaHosting. Но если проект требует большего количества выделенных вычислительных ресурсов (например, интернет-магазин или корпоративный портал с большим количеством посетителей), подойдут виртуальные серверы TuchaFlex + и TuchaBit. В специальной статье на наглядных примерах показываем, как самостоятельно посчитать ориентировочную стоимость размещения сайтов в облаках: https://tucha.ua/ru/solutions/skolko-stoit-hosting-sayta-v-oblake-i-kak-migrirovat   А для того, чтобы миграция была еще более удобной, Tucha дарит приятный бонус! До 6 октября 2020 включительно заказывайте акционные конфигурации виртуальных серверов с промокодом TD-217-0 и получайте:   - 1 месяц пользования сервисом для хранения резервных копий TuchaBackup в подарок (в объеме диска заказанного сервиса) - скидку 200 грн на оплату первого счета.   Чтобы воспользоваться предложением, звоните по телефону +380 44 583-5-583 или на электронный адрес [email protected] Обращайтесь прямо сейчас и получите качественный хостинг в облаках от Tucha и лучшую техническую поддержку 24×7!
    • РоманФ
      Не до конца тебя понял, но подобное меню делал недавно клиенту Вот ссылка, может что полезное будет, https://profimassage.ru/. "Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи" - это вроде как z-index решает.   "И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню" const callBackForm = document.querySelector('класс, или что то по чему ты находишь форму'),           gamburger = document.querySelector('нашел свое меню'); If(callBackForm.classList.contains('класс который добавляется при окрытии'){ блокируешь свое меню } метод contains - проверяет есть ли такой класс у элемента или открыта ли форма в данный момент; Что то такое    
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...