все усилия по созданию новых сайтов с использованием CSS3 + HTML5 направлены на то что бы улучшить работу сайтов для поисковых движков и для мобильных устройств
вот есть такой подход к этой разработке
в CSS3 доступно == Правило @media == позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др.
/* 1024px Screen */
@media screen and (max-width : 1024px) {
/* CSS Styles */
}
/* 800px Screen */
@media screen and (max-width : 800px) {
/* CSS Styles */
}
/* 640px Screen */
@media screen and (max-width : 640px) {
/* CSS Styles */
}
/* iPad with landscape */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* CSS Styles */
}
/* iPad with portrait */
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* CSS Styles */
}
/* Smartphones and iPhones */
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* CSS Styles */
}
