Jump to content
  • Sign Up
  • 0

Как верстать большие макеты ?


Димитрий
 Share

Question

Кто подскажет как верстать такой макет ? 
Шрифты слишком большие, размеры отступов и самой картины тоже. 

Как мне быть, сверстать так как есть или поменять все отступы и размеры шрифта на более менее подходящую ? 

 

psd макет скачать

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Как есть так и верстаете, просто макет на 2880 пикселей, на таком мониторе шрифт в 150 пикселей будет нормально смотреться :) Если вам для тренировки - найдите другой макет, который влезет на ваш монитор :)

Link to comment
Share on other sites

  • 0
3 часа назад, npofopr сказал:

Что вы там большого увидели? 

Две картинки на всю ширину экрана. под ними, под видимой частью экрана, футер.

На картинках всё центруется. 

- Я про шрифты, для мобилы если брать 320px (ширину) то 80px шрифт явно будет много для мобильно версии, и как мне правильно уменьшать шрифт для мобил с 320px шириной экрана и скажем для 480px ? в макете только для 750px.

Картинками тоже практический такая ситуация, если оставить ширину картинок таким же как в макете то в 665px(высота) будет очень большим в 320px экранах.

3 часа назад, AlexZaw сказал:

Как есть так и верстаете, просто макет на 2880 пикселей, на таком мониторе шрифт в 150 пикселей будет нормально смотреться :) Если вам для тренировки - найдите другой макет, который влезет на ваш монитор :)

То есть 2880px - это будет максимальная ширина сайта ? 
Другой макет - найду а вот с этим я считаю все равно разобраться нужно.

2 часа назад, npofopr сказал:

Считайте, что он для ретины) т.е. х2

Тупо все делить на 2, а как макеты для кретин верстают ?

Link to comment
Share on other sites

  • 0

Почитайте про плотность пикселей на мобильных устройствах и viewport, например тут https://itchief.ru/lessons/html-and-css/meta-viewport-how-it-works

22 минуты назад, Димитрий сказал:

Я про шрифты, для мобилы если брать 320px (ширину) то 80px шрифт явно будет много для мобильно версии,

Такие вопросы обсуждаются с дизайнером, если макет утвержден то так и верстаете. В учебном же макете никто вам не подскажет правильного решения :)

Хотя скорее всего макет действительно для ретины и на ней шрифт будет как минимум в 2 раза меньше

Edited by AlexZaw
Link to comment
Share on other sites

  • 0
1 минуту назад, AlexZaw сказал:

Почитайте про плотность пикселей на мобильных устройствах и viewport, например тут https://itchief.ru/lessons/html-and-css/meta-viewport-how-it-works

Такие вопросы обсуждаются с дизайнером, если макет утвержден то так и верстаете. В учебном же макете никто вам не подскажет правильного решения :)

Спасибо! 

Link to comment
Share on other sites

  • 0

1. Ну я так понял, что все делить на 2 (макет).
2. А дизайнер нарисовал для ретины - чтобы картинка была для ретина дисплеев ?
3. И еще для ретины, это только изображение увеличивать х2, или еще что то нужно увеличивать ?

Link to comment
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
Answer this question...

×   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.

 Share

  • Обсуждения

    • xwebrazrab
      Друзья, могу спрограммить все что угодно. WEB-программирование на заказ. Если время позволяет, то смогу выполнить для Вас любую задачу по внедрению или модификации скриптов.- PHP/MySQL программингБольшой опыт в написании и поддержке СРМ, CPA и партнерских программ, прочих повседневных скриптов.- АПИ сервисовВзаимодействие между сайтами и сервисами, передача данных, любые интеграции. Постбеки и обмен информацией по API.- Платежные системы (интеграция и взаимодействие)Юкасса, Робокасса, Qiwi, Free-Kassa, InterKassa и другие платежные сервисы. Нужно подключить свои сайты для приема оплаты? Нет проблем.- СМС-сервисы и мобильные подпискиSMS.RU и подобные СМС-сервисы, мобильные подписки (большая тройка в том числе).- Поддержка и сопровождение CPA-сетей, WapClick и других и партнерских программОпыт создания и поддержки движков для CPA и WapClick партнерских программ. Знаю все изнутри и механизм взаимодействия всех ролей.Опыт разработки и поддержки крупных СРМ, CPA и партнерских программ. Лояльно отношусь к готовому чужому коду, и зачастую мне не нужно знать движок сайта, для того чтобы реализовать ту или иную задачу.Для постоянных клиентов доступен в том числе и по телефону. Пишите, если я не занят сейчас, то смогу принять задачу на выполнению, если она в моей компетенции. Если загружен, то либо принесу извинения и откажусь, либо перенесем и спланируем на попозже.Также готов обсудить все варианты постоянного сотрудничества на взаимовыгодных условиях.Телеграм: @leon_cruiser(ссылка для добавления: https://t.me/leon_cruiser)Скайп: live:5759e99799ad8b0c(ссылка для добавления: https://join.skype.com/invite/HvxW613Za1XU)Данное объявления находят по ключевым фразам: веб разработка, веб программирование, веб программист, web разработчик, создание и продвижение сайтов, заказать лендинг, web разработка, web программист, заказать создание сайта, создание сайтов на заказ, разработка веб приложений, разработка веб сайта, веб разработка с нуля, заказать лендинг пейдж, заказать создание сайта под ключ, разработка web сайтов, найти программиста
    • Switch74
      код выложите куда-нибудь, например кодепен  
    • Switch74
      <div> <img src="/admin/files/_MG_2882.jpg" width="20%" /> <p><a href="https://prozuby.clinic/specialist/sryvkina-nelli-vaceslavovna">Срывкина Нелли Вячеславовна</a></p> <p><strong>Стоматолог-терапевт</strong></p> <p><strong>Опыт работы 8 лет</strong></p> </div> <div> <img src="/admin/files/_MG_2961.jpg" width="20%" /> <p><a href="https://prozuby.clinic/specialist/nikolaj">Дрюкова Ксения Витальевна</a></p> <p><strong>Стоматолог-терапевт</strong></p> <p><strong>&nbsp;Опыт работы 4 года</strong></p> </div>
    • marisabel
      Вот код , подскажите как мне сделать чтобы фото шли друг за другом с описанием под фото   <div class="block"><img src="/admin/files/_MG_2882.jpg" width="20%" /> <p><a href="https://prozuby.clinic/specialist/sryvkina-nelli-vaceslavovna">Срывкина Нелли Вячеславовна</a></p> <p><strong>Стоматолог-терапевт</strong></p> <p><strong>Опыт работы 8 лет</strong></p> <div class="contmeleft"><img src="/admin/files/_MG_2961.jpg" width="20%" /> <p><a href="https://prozuby.clinic/specialist/nikolaj">Дрюкова Ксения Витальевна</a></p> <p><strong>Стоматолог-терапевт</strong></p> <p><strong>&nbsp;Опыт работы 4 года</strong></p> </div>  
    • Kardamon
      Добрый день. Есть три блока разной величины расположенных горизонтально внутри контейнера. Нужно второй блок расположить ровно по центру по горизонтали, как указано на скриншоте. У меня же получается так, что навигационный блок смещается чуть правее
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy