Медийни заявки за създаване на две версии на сайт? Мобилни и настолни компютри ?!
Някакъв съвет??
Обикновено вградените медийни заявки работят добре за мен, но неима толкова много вариации между това, което трябва да изглежда сайтът в сравнение с настолния сайт, така че мислех да имам две напълно отделни стил листове?
Отговори:
-1 за отговор № 1Използвайте единствен стилов лист със следните заявки за мултимедия. Използването на един лист стил ще намали времето за зареждане на страницата.
Използването на няколко заявки за мултимедия (повече от 2 сте планирали) значително ще подобри практическата работа на потребителите, особено при многозадачност.
(max-width: 640px){your css style}
(min-width: 641px) and (max-width: 800px){your css style}
(min-width: 801px) and (max-width: 1024px){your css style}
(min-width: 1025px){your css style}
Ако не използвате размера на екрана, направете го абстрактно. Може да се нуждаете от това в бъдеще.
0 за отговор № 2
Моето предложение, базови стилове и ALL @media запитвания в отделни листове стил, както мобилни, така и настолни стилове, естествено ще натоварват, но ако се минимизира не би трябвало да има голямо въздействие.
Също така се опитайте да намерите баланс между презаписване колкото е възможно по-малко правила за базовия стил, просто разширявайте тези няколко свойства, които е необходимо да се различават.
Ако сайтът Ви все още се развива, може да се окаже по-лесно да го поддържате, ако презапишете повече правила, отколкото интелигентно, но трябва винаги да бъде важен приоритет за оптимизиране възможно най-скоро.
0 за отговор № 3
Да, можете да насочвате по различен начин .css файлове, базирани на размери на екрана.
например добавете това към <head> раздел
<link rel="stylesheet" media="screen and (max-width: 900px)" href="css/medium.css" />
Това ще зададе нов css файл за размери на екрана под 900px.