Съдържание
- Статични оформления на VS течности
- Филтриране на стандартни размери на екрана
- Мобилни екрани
- Златната решетка
Мобилните телефони, таблетите и компютърните монитори имат различни употреби, потребители и размери, които оставят въпроса какъв най-добър размер на оформлението за даден сайт се определя от нуждите на основните потребители на този сайт. Ако даден сайт е предназначен да бъде гледан от стандартните потребители на широкоекранен дисплей с разделителна способност 1680x1040 пиксела, размерът на сайта трябва да бъде направен така, че да пасва на основния екран на браузъра. Ако сайтът е предназначен за използване на мобилни устройства, той трябва да бъде направен за много по-малък екран.
Статични оформления на VS течности
Първото съображение е дали сайтът изисква измерение, дефинирано в пиксели. Като използвате проценти, можете да създадете "флуидно" оформление, което динамично променя размера на областите, в зависимост от размера на прозореца на браузъра. Когато се използва в комбинация с текст, течно оформление може да бъде най-добрият избор при създаването на сайт за стандартна разделителна способност на екрана, както и за мобилни браузъри. Текущите оформления се постигат чрез използване на "width = 100%" в декларацията за съдържание на CSS, вместо например "width = 960x".
Филтриране на стандартни размери на екрана
За да създадете "фиксирани" или флуидни оформления, ширината на таблиците divs, wrappers или основните съдържания трябва да се побере в прозореца на браузъра на потребителя, като се вземат предвид и лентата за превъртане, и лентата с инструменти. Трябва да помислите и за по-голямата част. Повече от 80% от браузърите днес използват разделителна способност на екрана над 1024x768 пиксела. Това означава, че можете да го направите за 1680x1024 пиксела, но е добра идея да се проектирате в средата. Широки 960 или 980 пиксела са две надеждни мерки, които се използват за удобно показване на съдържание в браузър, използван от всеки, който използва резолюция 1024x768 или по-висока. Системата също така пасва добре на мобилни устройства, способни да показват цели сайтове. Ако е твърде стегнат, 1080 е следващата най-добра ширина. Не забравяйте височината на стандартен браузър при всяка резолюция, за да държите най-важната информация над „сгъване“ или точка, където става необходимо превъртане.
Мобилни екрани
Ако искате сайтът ви да изглежда добре на различни мобилни устройства, трябва да го направите специално за устройството или да създадете специален стил, който се използва от мобилните браузъри за показване на „мобилната“ версия на сайта ви. Резолюцията 240x320 е настоящият стандарт за повечето смартфони и интернет устройства, като например iPhone. Добра идея е да се използват "отлични" проценти или оформления, тъй като много устройства поддържат както портретен, така и пейзажен режим. ако създадете уеб сайт, който е настроен на ширина 320 пиксела, той може да изглежда отрязан за потребителя чрез достъп до него в портретен режим.
Златната решетка
Може би най-добрата система за определяне на размерите на оформлението е чрез използването на мрежата. Решетките изчисляват идеално балансирани региони в рамките на дадена ширина, за да осигурят усещане за това как да се мащабират елементите в рамките на основното оформление или областта със съдържание. Тези елементи включват рекламни кутии, барове, рекламно пространство или параграфи. Например, оформление с обща ширина 1080 пиксела и разделяне с помощта на златната мрежа би оставило областта, оставена за блогове с ширина 739 пиксела и дясна лента с ширина 780 пиксела, като и двете използват поле от 10 пиксела. Крайният резултат е перфектно подравнено и балансирано оформление. Можете да експериментирате с няколко различни мрежи, като посетите генераторната система на мрежите (вж. Ресурси).