Направи си сам реагиращ дизайн в теми на WordPress
Здравейте на всички в wpsovet.ru. Без люлеене и теория започваме да практикуваме. Статията ще бъде просто огромна, ще продължим докрай, за това как да направите сами адаптивен дизайн на уебсайт, ще напиша всичко много подробно, така че задълбайте и кандидатствайте.
Съдържание.
Задайте командата на браузъра.
Ако имате нужда от подсказка къде да вмъкнете кода, погледнете екранната снимка.
На този етап точката свърши, просто не се ласкайте, останалото ще бъде десет пъти повече.
Променете стойностите на максимум.
Втората стъпка е да приложите техника в CSS, наречена fluid layout. Този прост метод автоматично ще намали и разшири нашия сайт до какъвто и да е размер, от който се нуждаем. Цялата работа се свежда до замяната на всички фиксирани стойности с променливи максимални (не знам научния термин, така че сам го измислих). На неадаптирани сайтове всички стойности са фиксирани и в кода те изглеждат така.
И за да може сайтът да бъде компресиран, просто трябва да добавите към параметъра width, това е префиксът max.
Този параметър показва, че максималната ширина може да бъде само до определената стойност (в моя случай 960 px) или дори по-малка. И колкото и да разтягате прозореца (или по-скоро да увеличите разделителната способност), сайтът няма да промени максималния си размер, а да компресира колкото искате.
Настройване на лентата на сайта и съдържанието.
Две важни части от блога, в класиката, първо вдясно, второ вляво. И трябва да сме сигурни, че и те ще се държат нормално в бъдеще.
За успешен отзивчив дизайн трябва да разделим тези два елемента на проценти. Да предположим, че ширината на целия сайт е 1000px, съдържанието е 750 px, а лентата на сайта, логично, е 250 px, така че първата отнема 100%, втората 75% и третата 25px, това е всичко просто аритметика.
