Цял екран демо с крайния резултат.
Основна структура на страницата
Започнете със създаване на стандартна страница. Да се създаде нещо като това:
Стандартна страница структура. На малки илюминатори всички потегли в една колона, на големи дисплеи настрана от страната. За яснота маркер навигация е оцветен в синьо. Маркировка:
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Нека добавим визуални стилове и правила на стартовата решетка.
създаване на мрежа
На първо място, обхващането на други структурни елементи на контейнера - ще бъде контейнер Grid. Аз ще се
. Сега добавете някои основни стилове на мрежата:В по-горе, ние се установи, че контейнерът трябва да бъде езика: решетка;, има една колона (по избор сега се добавя, но за пълнота предпише сега). Разделители между клетките на мрежата трябва да бъде 10px.
За да го направи да изглежда малко по-ясно, нека да добавите няколко визуални стилове:
Осъществяване на адаптивна страница
Добави заявка за медии, за да когато достигне определен размер Прозорецът за оформление се е променило (вземе 600px).
Сега големи сита, се променят, за да идентификационни шаблони колони: повторение (4, 1fr);, което ни дава четирите колони с еднаква ширина. На следващо място, трябва да настроите ширината на всички структурни елементи. Tags хедър, навигация и долния ще заемат всички 4 колони, но само три секции. Останалите колона автоматично се поставя настрани.
И накрая, стиловете, за да промените изгледа на менюто:
Какво имаме:
Създаване на меню, за да напусне
Отличен пример за това как CSS позициониране може да работи с конструктивни елементи, дори в декларираното нетно. Ние ще се нашето меню, го премахнете от документооборота и spozitsioniruem извън екрана. Останалата част от елементите на мрежата, ще бъде на мястото си.
Нека да напиша друга медия заявка. Имаме искане за мин ширина, сега ние трябва да напишете стилове за макс ширина. Веднага след като изгледа достигне магическа стойност на 600px, трябва да се менюто беше скрит от екрана:
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Попитахме фиксирана ширина от менюто и да го поставя от лявата страна, така че тя напълно изчезна.
Ние използвахме позицията фиксирани, но можете също да се вземат абсолютно. Всичко зависи от това дали искате свитъци от менюто с страницата или не.
В кода, ще забележите на прехода имота, тя ще работи, когато ние добавяме ключа. Ние постоянно ще се покаже лентата с менюта с помощта на трансформиращия. Благодарим Ви, че Рейчъл Nabors и Джо Zimmerman за мен, че се трансформира много по-добре от гледна точка на производителността за анимация, отколкото е положението напомня!
ключ
Скрихме нашето меню, сега трябва да се създаде ключ да си го върне, когато това е необходимо. Добавяне на връзка към менюто на повикване и да се затвори.
Добавете заглавието:
Забележка: идентификатор на фрагмент използва по този начин, го прави така, че когато някой кликне върху линка, се съхраняват в историята на браузъра. Вашите потребители може да не го харесваш! Благодаря Джо Цимерман, който посочи към него.
Добавете следния код към макс ширина имота:
И все пак! Ключът е готова.
Какво имаме:
заключение
Ние сме готови! Донесох стиловете до минимум, така че те да не пречат на нас. Но вие не се колебайте да създадете свой дизайн. Може би искате ключа JS вместо: мишена, то вие имате всичко необходимо. Надявам се ползва този малък урок на стартовата решетка. Следете за нови уроци!
Редакция: Екип webformyself.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Най-IT новини и уеб разработки на нашия канал Телеграма
Начално зареждане рамка - ние да компенсирате адаптивна, лесно, бързо!
Свързани статии