Какво е отзивчив уеб дизайн

• Може 3, 2024

Има три основни характеристики на отзивчивия уеб дизайн, които са течни оформления, промени на изображението и медийни заявки. Медийните заявки всъщност не са толкова нови за уеб дизайна. Започвайки като типове медии в CSS2.1, бихме могли да създадем таблици за стилове както за уеб, така и за печат, като донякъде гарантираме, че уеб страницата ще изглежда еднакво на екрана и при отпечатване. Това премина в медийни заявки в CSS3. Тази заявка проверява за ширината на медийното устройство (max-device-width) и го тества спрямо зададена стойност като 480px или 768px. В отговор на тази заявка използваме CSS стилове, за да променим оформлението на флуида и да преоразмерим изображенията на екрана.

Можете лесно да тествате дали уебсайтът има отзивчив дизайн. Започнете с браузъра на цялата ширина на екрана на вашия компютър. След това плъзнете десния ръб на браузъра наляво, за да намалите ширината на прозореца на браузъра. Трябва да видите, че изображенията стават по-малки и оформлението ще вземе плаващите divs, които са една до друга и ще ги подредете вертикално. Например, ако имаме шест изображения (шест div) на всеки ред на страница на галерията на цял екран, тъй като намаляваме ширината на екрана, броят на изображенията в един ред постепенно се намалява и подрежда, ако е необходимо. След като ширината се намали до определено количество, самите изображения ще започнат да преоразмеряват по-малки размери. Ако наблюдавате внимателно, ще видите също, че определени елементи на дизайна, като навигационните връзки, могат да бъдат намалени до икона или дори да изчезнат. Това също се контролира от таблицата за стилове на CSS.

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

Инструкции Видео: Top 5 Web Designing Framework (Може 2024).