Как да се изгради една адаптивна сайт с помощта на CSS!

Всеки говори за адаптивния уеб дизайн. Но означава ли това, че всеки разбира за какво е?

Движение с адаптивен дизайн - това не е само за развитието на сайтове за мобилни устройства, тук става дума за адаптиране подредби за различни размери на екрана (илюминатори).

Важно е да се разбере, че на сайта не трябва да бъде изграден за определен компютър или мобилно устройство. Тук, оформлението е важно умението да се адаптира към различни размери.

Някои хора смятат, че за намаляване и премахване на функционалната съдържанието, което те считат за маловажно, че е нормално за потребителя. Но как може да сте сигурни, че информацията, която сте изрязали или преместен на по-задните страници, което не е съдържание, което е най-важно за мен?!

На първо място, ние трябва да разберем, че упражняването на адаптивния дизайн, той не само се грижим за мобилен дизайн. На второ място, разработване на добри адаптивни сайт изисква много време и усилия, а не само да помогне на медийни заявки. С огромен и нарастващ брой устройства с уеб възможности, важно е да се даде своя уебсайт шанс за ефективно улеснява работата на потребителите.

За упражняване на отзивчив уеб сайт, ние можем да използваме един и същ код за двете настолни и мобилни устройства. Това е удобно, защото ние не трябва да се коригира поотделно съдържанието на всяко устройство. Но много сайтове се крият съдържанието им, като се има предвид че не е необходимо за мобилните потребители. В това има два проблема:

На първо място, той на практика наказва мобилни потребители, които преглеждат сайта.
На второ място, скрити стилове в CSS, не означава, че съдържанието не се изтегля. Това може значително да повлияе на ефикасността, особено за тези, които имат лоша връзка.

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

За този урок, ние сме създали уеб сайт, който е перфектно мащаб между големи и малки екрани. Вие запазвате цялото съдържание на всички размери на екрана. И с помощта на медийни заявки, навигация ще премине от хоризонтална във вертикална дисплей, за по-малки устройства.

Ключов елемент на гъвкавост в адаптивен дизайн е ширина течност оформление. Всичко, което трябва да направите е да се създаде обвивка, съдържание и ширини на колони, които ще се адаптира към различни ширини на устройства. Това не е нищо ново, но сега е по-важно от всякога. За да опростим нещата, ние ще създадем течност страница, състояща се от навигация, основното изображение и две колони, който взема предвид местоположението на устройства с различни размери. Включили сме и respond.min.js, което позволява на медиите трябва да работи в IE6-8.

Основният HTML структура:

Когато става въпрос за CSS, след което задайте максимална ширина, ще бъде добра идея, тя ще спре сайта от приближаване на огромни екрани, но няма да възпре намаляване страници. Един от основните проблеми, когато преминават от стационарни ширина до течност, тя е по-голям. В CSS, има едно просто решение на този проблем. Просто настройте ширината на изображението на 100%. Също така добави към височината на изображението автоматично да се избегне сплескани изображения в Opera и Safari на малки екрани:

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

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

Преминаване основната навигация

Основната причина, поради която трябва да се промени за навигация, то се провежда минимизиране, което може да доведе до нечетлив и трудно натискане. Използването на този метод, можете да опрости живота на потребителя. Може също да забележите в кода, който сме направили промени в #main настрана и секции, за да ги свърже в една колона.

Ще забележите, че някои мобилни устройства, вашият сайт е компресиран автоматично с размера на екрана. Този път, просто се превръща в проблем, когато трябва да се увеличи размера на екрана, за да navigirovat на неудобно съдържание.

За да се даде възможност на медиите искания, да влязат в пълна сила, един нормален мобилен, оптимизиран, отзивчив сайт на политики трябва да съдържа нещо подобно на следното: