хорошо, живая копия здесь:
http://www.cutcodedown.com/for_others/mark4man/template.html
Как и во всех моих примерах, каталог:
http://www.cutcodedown.com/for_others/mark4man/
Широко открыт для легкого доступа к клейким вещам и деталям — не стесняйтесь оглядываться по сторонам.
Давайте разберем CSS, следуя инструкциям:
http://www.cutcodedown.com/for_others/mark4man/screen.css
Первое, что у меня есть в каждой таблице стилей, — это «сброс». Они существуют потому, что внешний вид HTML-элементов по умолчанию на самом деле НЕ касается HTML.
такого понятия не существует, поскольку на заре производители браузеров шли своим собственным путем.
Это было сделано намеренно, хотя сейчас объяснять, как и почему это заняло бы слишком много времени.
Суть в том, что отступы, поля и границы некоторых элементов несовместимы между браузерами, при сбросе они все обнуляются, чтобы вы знали, с чего начинаете.
Есть меньшие сбросы, но они могут испортить элементы формы.
Существуют более крупные сбросы, которые сами по себе граничат с фреймворками, но именно из-за них у сбросов плохая репутация.
(кстати, многие разработчики полностью отвергают эту концепцию ТОЛЬКО из-за ее дрянности). Тот, который я использую, разработанный Дэном Шульцем, RIP, представляет собой безопасную золотую середину.
При четверти К он не настолько велик, чтобы можно было жаловаться на размер, и он не нацелен ни на что, что не требует перезагрузки или может быть из-за них испорчено.
После перезагрузки я скрываю ХР как само собой разумеющееся.
HR существует для изменения темы, где текст заголовка нежелателен/неоправдан, а НЕ для того, чтобы просто «нарисовать линию по экрану». Поэтому в моем макете экрана такое значение обычно передается другими средствами, поэтому я скрываю HR. Это не значит, что я не использую их в HTML из-за их СЕМАНТИКИ.
Далее следует медиа-запрос, нацеленный только на устройства, ширина которых меньше 480 пикселей.
Два значения регулировки размера текста внутри него являются исправлением ошибок для ранних устройств iOS и Windows Embedded.
Я изолирую их в медиа-запросе по ширине, поскольку отправка их в разрешения OSX для настольных компьютеров может нарушить возможность масштабирования Safari на рабочем столе, даже несмотря на то, что это оказывает НУЛЕВОЕ влияние на масштабирование iOS Safari.
(Как обмануть этого сумасшедшего Яблока!)
HTML, тело Я установил для них высоту 100%, поскольку один из аспектов CSS заключается в том, что ни один элемент не может иметь высоту или минимальную высоту в процентах, если родительский элемент ее не имеет, за исключением HTML.
В обоих этих тегах высота рассматривается как минимальная высота, поэтому мы говорим, что BODY должно расширяться как минимум до высоты экрана.
Он все равно будет увеличиваться, если содержимое будет выше.
Это сделано для .widthWrapper, о чем я сейчас объясню.
тело -- Мне нравится вручную объявлять шрифт, используемый для большей части основного документа.
Я установил более высокую высоту строки, чем по умолчанию, поскольку 1) высота строки по умолчанию несовместима с разными браузерами и 2) она улучшает читаемость.
Хорошее практическое правило: используйте стек шрифтов без засечек для потокового контента, поскольку большинству экранных мультимедийных устройств не хватает разрешения для четкого отображения шрифтов с засечками.
(засечки улучшают разборчивость при печати, но могут поставить под угрозу ее на экране, забавная штука)
.widthWrapper -- Я установил переполнение только для того, чтобы убедиться, что любые поля или поплавки, которые мы можем использовать, не пытаются «выйти» из этого контейнера.
Максимальная ширина означает, что этот div может вырасти до этой ширины И НЕ ШИРО.
Таким образом, он все равно может сжиматься до размера экрана.
Это делается в EM (кратном текущему размеру шрифта), поэтому макет снова является ЭЛАСТИЧНЫМ и может расти, чтобы соответствовать контенту и предпочтениям пользователя.
Минимальная высота 100% означает, что если контент короче экрана, .widthWrapper вырастет до высоты экрана.
Здесь это работает только из-за 100% высоты, объявленной в HTML и BODY.
автоматические боковые поля центрируют его.
а затем границу.
#вершина -- прокрась это красиво.
Опять же, используя EM, чтобы он основывался на текущем размере шрифта, а не на пикселях, поэтому все динамически настраивается.
Поскольку весь текст центрирован, мы центрируем здесь, добавляем поле, чтобы отодвинуть первый раздел текста содержимого от объектов, и, конечно же, цвет и границу.
ч1 -- inline-block заставляет наш H1 сжиматься в соответствии с его содержимым.
Технически это позволяет ему отображаться внутри других элементов, но поскольку наш P останется блоком, он получит собственную строку и будет центрирован благодаря выравниванию текста по #top.
Отступы меньше, потому что EM основан на текущем размере шрифта, который, как вы можете видеть, я удвоил.
Вы заметите, что я (большинство) всегда использую полное сжатое объявление шрифта.
Мне нравится видеть, что ТОЧНО установлено для лица и стиля, и, что более важно, вы не можете доверять правильному наследованию высоты строки.
Eсть
ЛОЖЬ За последние шесть или семь лет циркулировало, что исключение метрики из высоты строки (например: line-height:1.5 будет наследоваться правильно, это ерунда.
Если вы измените размер шрифта, переопределите высоту строки.
ВСЕГДА.
и к тому времени, как вы наберете «font-size:200%; line-height:150%;», вы наберете почти столько же символов, сколько просто произнесете все сжатое свойство.
... и если на вашем хостинге для CSS включено сжатие gzip, он фактически становится меньше.
:/
#топ п -- Заполните его по всему периметру, отведите верхнюю часть, чтобы отодвинуть ее от H1. Ничего особенного.
ч1,
#топ п,
#первыйтекстовый раздел,
#второйтекстовыйраздел,
.тарелка,
.торцевая пластина -- Я установил границу для всех этих элементов в одном удобном месте, чтобы вы могли быстро изменить или удалить ее из всех.
Это также причина, по которой «миксины» в LESS/SASS/SCSS бессмысленны, если вы понимаете селекторы. SCSS - это ЕЩЕ ОДНА часть BS, с которой вы, вероятно, не сталкивались, но некоторые люди скажут вам использовать/делать это некомпетентная ерунда.
#первыйтекстовый раздел,
#второйтекстовый раздел -- они оба имеют одинаковую ширину, половину максимальной ширины .widthWrapper, но я установил максимальную ширину 100%, чтобы они уменьшались по размеру экрана по мере необходимости.
Я заполняю верхнюю и боковые части, чтобы к содержимому можно было применить нижнее дополнение, а не полагаться на поля.
Я объясню это в ближайшее время.
#firstTextSection поскольку он находится напротив левого края, я потянул его левую границу, чтобы он выглядел лучше.
#второйтекстовый раздел Я вставил это в 3em, размер шрифта которого по умолчанию в стандартной системе составляет 48 пикселей — не совсем те 40, о которых вы говорили, но соответствует размеру текста и удвоенной высоте строки, что является хорошим трюком для получения чистого согласованного текста.
ищу макет.
Также имейте в виду, что, поскольку это EM, оно НИКОГДА не будет фиксированным количеством пикселей, например, на рабочей станции, на которой я сейчас работаю, 3EM обеспечит 60 пикселей, а в моем медиацентре, настроенном на десятифутовый интерфейс, это будет 72 пикселей.
#firstTextSection p,
# SecondTextSection p Я заполняю нижнюю часть моих параграфов, а затем заполняю их контейнер с трех других сторон, чтобы избежать головной боли с макетом, называемой «схлопыванием полей», которая может привести к выходу полей из родительского элемента или к сбою в применении фона.
(FF Quantum только что повторно представил эту десятилетнюю ошибку, которую они исправили восемь лет назад в старых моделях. ВПЕРЕД, ПРОГРЕСС!). Маржа должна использоваться только после того, как отступы были израсходованы или они вам «нужны» за пределами границы, где вы не можете сделать это из родителя.
.plate, .endPlate -- эти два объекта имеют много общих свойств, поэтому я снова включаю их.
(и опять же, кому нужны "миксины"? Не мне, не мне...). Display
lock принудительно помещает их в свои собственные строки, max-width заставит их сжиматься до нужного размера, если экран меньше, чем они есть, height:auto переопределяет значение HTML, чтобы сохранить соотношение сторон изображений, и снова и автоматическое поле с нижним полем, чтобы отделить их друг от друга.
(поскольку заполнение изображений сомнительно).
.торцевая пластина -- затем значения, которые РАЗНЫЕ -- убрав автоматическое поле справа, вы сдвинете его заподлицо с этой стороной, затем уничтожите боковую границу, как мы это сделали с первой текстовой областью.
... и это основной полужидкий эластичный макет рабочего стола/высокого разрешения.
Теперь нам нужно сделать его адаптивным для мобильных устройств.
максимальная ширина: 54em - Я добавляю ему пару дополнительных EM к размеру .widthWrapper как «фактор выдумки». Хорошее правило — добавлять один или два дополнительных EM в ваши медиа-запросы, чтобы они запускались раньше, поскольку измерения не всегда точны.
Лучше, чтобы он сработал до того, как он понадобится, чем если он случайно не сработает, когда это необходимо.
Этот просто убивает границу .widthWrapper, поскольку, когда она находится на одном уровне с краями окна, нет реальной причины иметь ее там.
максимальная ширина: 32em -- внизу мы соприкасаемся с отступом на второй секции и их шириной, поэтому просто уберите боковые поля, опустите боковые отступы, чтобы освободить больше места, и уничтожьте боковые границы, чтобы они могли расширяться и заполняться.
всю ширину экрана.
... и вот, в двух словах, как это сделать.
Подключите его к какому-нибудь мусорному программному обеспечению для проектирования и наблюдайте, как он почти мгновенно разваливается на куски вверх лицом вниз.
Серьезно, если вы ХОТИТЕ сделать это правильно, выкиньте этот мусор на обочину и найдите время, чтобы НАУЧИТЬСЯ.
В противном случае все, что вы делаете, это обманываете себя.
