Димитрий

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

На сколько я знаю, normalize еще и исправляет какие то баги с браузерами (почитайте в самом файле), reset только сбрасывает (думаю с ним многие значения придется переустанавливать).

Спасибо!

- Я про шрифты, для мобилы если брать 320px (ширину) то 80px шрифт явно будет много для мобильно версии, и как мне правильно уменьшать шрифт для мобил с 320px шириной экрана и скажем для 480px ? в макете только для 750px. Картинками тоже практический такая ситуация, если оставить ширину картинок таким же как в макете то в 665px(высота) будет очень большим в 320px экранах. То есть 2880px - это будет максимальная ширина сайта ? Другой макет - найду а вот с этим я считаю все равно разобраться нужно. Тупо все делить на 2, а как макеты для кретин верстают ?

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

Думаю, разберешься... https://webref.ru/course/css-basics/css-reset https://habrahabr.ru/post/45296/ https://htmlacademy.ru/blog/64-about-normalize-css

Спасибо!!! А то я уж думал что я такой туп***, что не могу разобраться в этой спецификации....

Мне понадобилось 8-9 месяцев чтобы понимать хоть что-то в этой спецификации, даже сейчас я местами чего-либо не понимаю. Так что это нормально. Пиши в лс, если в телеграмме сидишь, а лучше в скайп го ? Там я тебе могу про спецификацию рассказать столько сколько я знаю.

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

Зачем тебе именно этот макет, что макетов больше нет ? Бери отсюда https://htmlforum.io/forum/31-макеты-для-вёрстки/, и сверстай, или другой какой нить найди бесплатных полно же в инете. ps: могу скинуть один psd лендос + шрифты к нему, сам верстаю этот сайт, все не как времени нет до верстать.

С position удобно позиционировать всякое. Насчет пытаться верстать, - у Вас не получиться верстать, пока не будете понимать свойства css и знать для чего лучше они подходят. Я советую теорию знать, потом уже пытаться верстать.

Спецификации так и написано...

А где кроме can i use можно посмотреть, почитать про все браузеры, мобильные/и десктопные которые сейчас актуальны и их нужно поддерживать ? ps: вроде как не нужно сами браузеры поддерживать, нужно вроде как движки поддерживать.

То есть это только для того чтобы поддерживать ie 4 и выше ? Я сейчас видел на новых сайтах/проектах есть только woff,woff2, и ttf. А почему svg нету, на сколько я знаю в старых продуктах Apple использовались как раз таки svg? или я что то не то читал ? Нет, шрифт тот же самый, просто формат шрифта другой... Вот мне и интересно почему в названии указывается, а не с помощью font-weight ?

@font-face { font-family:'SF Pro Display'; font-style:normal; font-weight:500; src: local('☺︎'), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.woff2") format("woff2"), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.woff") format("woff"), url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.ttf") format("truetype"); /* (C) 2015 Apple Inc. All rights reserved.*/ } @font-face { font-family:'SF Pro Display 500'; src: url("/wss/fonts/SF-Pro-Display/v1/sf-pro-display_medium.eot"); /* (C) 2015 Apple Inc. All rights reserved.*/ } 1. Почему при подключении шрифта apple указывает имя шрифту такое font-family: 'SF Pro Display 500'; а где то без 500 font-family:'SF Pro Display'; ? 2. И почему при подключении eot не указывается font-style, и font-weight в то время как сверху указывается ?

Для каждой начертании (font-style: normal/italic), и даже насыщенности (font-weight: 100-900) нужен свой шрифт (то есть отдельный файл). Насчет отличии в Firefox и Chrome - каждый браузер по своему все делает. Сайты не должны отображаться в каждом браузере одинаково!

Их на сколько я знаю нужно проверять на своем браузере (то есть что поддерживается). Вот тут глянь: Если я правильно понимаю: svg - для старых apple продуктов woff - для новых браузеров eot - для ie начиная 6 версии ttf - для старых Android Я этим генератором пользуюсь: https://www.fontsquirrel.com/tools/webfont-generator Еще этим сайтом: (чтобы узнать поддержку) https://caniuse.com/ Ps: Я как раз сейчас шрифты изучаю, и все что с ними связанно, го залей куда нибудь вместе попробуем проверить.

Ну да. Начал читать 2.2, там так и пишут... спасибо за отклик!

Получается, читать нужно css 2 + 2.2 (тут я в счет модули не беру) , или же нужно читать 2.2 + модули, а CSS 2, 2.1 не стоит читать ? Вот это мне трудно понять, английский только начал изучать:

Правильно ли я понимаю уровни CSS спецификации: CSS 1 - Устаревшая спецификация. CSS 2 - Содержит много ошибок. CSS 2.1 - Та же CSS 2 но исправленными ошибками. CSS 2.2 - Тут что ? Я не понимаю, объясните люди добрые. CSS 3 - Модули CSS, с разными уровнями. Разные модули заменяют разный раздел в CSS 2. CSS 4 - Консорциум говорит что не будет, но посмотрим что на самом деле будет. Для меня не совсем понятно, 2.2 для чего эта спецификация и что она делает ?

тогда тут посмотри: https://toster.ru/q/267732

Так пробуй: @font-face { font-family: 'Dymaxion Script'; src: url('../fonts/DymaxionScript.ttf') format('truetype'); }

эта картина сама такая а фон просто указан темным. танки так делали - если вы об этом... (но картинка большая будет)

а как нижний скролл убрать ?

ну, без теории как хорошие сайты делать, верно ? плохие - работодателю не нужны, заказчику тоже.