Как да си направим адаптивен дизайн на сайта при всички резолюции на екрана
Поздрави, ежедневни посетители и редовни читатели Royal-Site.ru блог!
Преди известно време, аз актуализира блога си, създавайки от нулата напълно тема за WordPress. За това как се е случило, аз написах в статията "Global актуализацията и реорганизиране на моя сайт". Една от основните задачи при създаването на нов шаблон - адаптивно оформление на сайта за всички резолюции на екрана.
Кратък план статия:
В предишна статия писах, че този адаптивен дизайн и защо имате нужда от него. Но как да се постигне това много адаптивност?
Как да си направим адаптивно оформление на сайт
На първо място, ако дойдете да наложи адаптивен дизайн на сайта, между маркерите
Какъв глупак съм, че не го направи веднага, докато се опитва да направи адаптивно оформление на сайта.
Проблемът за мобилни браузъри в тяхното разположение мащаб сайт, дори и адаптивни.
Но това не може да бъде!
Оказва се, че ако не се регистрират кода, които посочих по-горе, мобилния браузър не разбира, че сайтът е адаптивна и просто се опитва да намали страница на сайта, така че да влезе в малък екран мобилен телефон.
Поради своята глупост и некомпетентност, аз загубих много време. Но сега си спомням завинаги))).
Adaptive оформлението медийни заявки
За да бъде адаптивно оформление на сайт с помощта на CSS, трябва да използвате медийни заявки.
Как е? Да, много лесно. В CSS файла, трябва да се регистрирате въпроси, като например:
Този код означава, че стиловете са направени между "<> "Ще работя за екрани с минимална ширина и максимална 1440px 1599px.
Това означава, че тези стилове са елементи на сайта, който трябва да се адаптира в зависимост от разделителната способност на екрана трябва да се регистрира отделно за всяка възможна ширина на екрана.
Най-важната способност на екрана, с адаптивно оформление
- 320 пиксела - Мобилни устройства (вертикална ориентация);
- 480 пиксела - Мобилни устройства (Пейзаж);
- 600 пиксела - Малки плаки;
- 768 пиксела - плочи (вертикална ориентация);
- 1024 пиксела - плочи (пейзаж) / нетбук;
- 1280 пиксела и по - PC.
Именно на тези разрешения и трябва да се съсредоточи и да им даде специално внимание в адаптивно оформление. Това са най-често срещаните видове разделителни способности.
фърмуера адаптивен дизайн
Много полезна за създаване на адаптивни оформление фърмуера. Комфорт в това, че всички стилове за адаптиране блокове, бутони, таблици и т.н. вече е регистриран в bootstpap. Необходимо е само да се разбере какъв клас за всеки елемент се задава.
За да започнете, изтеглете най-новата версия на фърмуера и да го свържете към вашия сайт. Имайте предвид, че връзката от стилове и скриптове за WordPress има свои собствени характеристики.
Разполагане на фърмуера се характеризира с това, че ширината на устройството или на екрана е разделен на 12 равни части. И прехвърляне на определен клас на блок може да бъде определен на желаната ширина на номера на блока на части.
Например, такъв проект ще избере един за съдържание на блок в ширина и 8 части от малка ширина на страничната лента до 4 на екрана:
Можете да настроите тиретата от ръба, отново, за желания брой парчета. Например, този дизайн:
ширина блок е създадена през 10 части с отстъп в лявата част на екрана 1.
Ако погледнете, тя не работи с връзки за обувки, за да работи с адаптивен уеб дизайн много бързо. В какво точно тези стилове работят правилно и няма да има нищо на кривата на този сайт.
Проверка на адаптивността на сайта
Но възниква въпросът: как да се тества на адаптивността на сайта? Тук сте се регистрирали медийни запитвания CSS, свързан с връзки за обувки и използването на класовете. Как да се провери, че сайтът е адаптиран правилно на всички резолюции на екрана.
Много точна и най-важното е безплатна услуга, която заслужава уважение и благодарност от уеб администратори и уеб дизайнери, които се занимават с адаптивни оформление на сайтовете.
Да, да се направи адаптивен дизайн на сайта, трябва да работим усилено. тези трудове Но бъдат възнаградени подкрепящо отношение към вашите търсачки сайт, и най-важното е, че посетителите на сайта си.
