Responsive Design с CSS.


2

Здравейте , имам следния сайт визуализиран на Десктоп:

 

 Искам да има следния вид на Таблет:

 

Обяснявам с думи:

1.Черния дъсковиден background да изчезне.

2 Левия и десния aside да отидат долу , като по маловажна информация.

3. Header и Footer малко да се скъсят.

4. Навигацията да не е така отрязана но пак да е inline тоест елементите да са едно до друго.

 

Пробвах при по малка резолюция да сменя main-container като направих следното :

#main-container{
width:100%;
height:100%;
 
}
 
Но черния дъсковиден background на бодито продължи да си стои там.
 
Ето линк към целия ми сайт архивиран в картинките и стиловете:
 
https://docs.google.com/file/d/0By_XKnVUDHAnWkhlR2JMcDlyUk0/edit

 

 

 




Отговори



1

Това случайно имаш ли го на уеб сървър да го рзглеждаме като уеб страница?

Иначе респонсив уеб дизайн може се прави като overwrite-ваш стиловете за различни резолюзии с медиа куерита.

пример:

nav li{
   float:left;
   text-align:center;
   font-size: 17.5px;
   height: 57px;
   width: 13.9%;
   padding: 11px 5px 0 5px;
}
@media all and (max-width: 930px){
   nav li{
      padding-left:2px;
      padding-right:2px;
      width:14.5%;
   }
}
Стиловете в @media all and (max-width: 930px) се изпълняват само ако екрана е по-малък от 930px.
 
Ако правиш сайт който да се отваря на мобилни устройства задължително да сложиш "<meta name="viewport" content="width=device-width">" в head. Иначе има телефони с 720p екрани, които въпреки че са със същата резолюция като мониторите са много по-малки. Повечето мобилни браузъри автоматично увеличават текстовете да се четат но много елементи остават малки. Освен това медиа куерито което демонстрирах няма да работи. С <meta name="viewport" content="width=device-width"> всяко устроиство си знае дали и колко да увеличава всичко за да се вижда добре.

от dany90 (1340 точки)


0
Нямам сайта качен на уеб сървър. А кода който ми даде във външен CSS файл ли да го сложа ?

от Svetoslav1987 (1061 точки)

0
Може и по двата начина. Можеш да го сложиш някъде след стиловете които искаш да промениш. Примерно в дъното на файла. И правилата за различни резолюции вървят от горе надолу (почваш с по-големите екрани). Ако искаш можеш да сложиш всички медиа куерита в отделен файл и да го заредиш след основния. Аз попринцип гледам да имам по-малко малки отделни файлове. Това означава по-малко заявки къмсървъра и по-бърз сайт.

от dany90 (1340 точки)


0

 Трябва да използваш media queries. Може да потърсиш в нета как се използват(много е просто), а в курса на Телерик "Slice and Dice" има подробна лекция за това. Чрез MQ можеш лесно да кажеш при каква резолюция какво да се случва със стиловете. Само че не вървят на IE8 и надолу, и ако искаш да ги подържаш там трябва да използваш допълнителни неща(Modernizer, CSSPie, Shivs, Shims) 


от ivan.mihov1 (4988 точки)


0
Изгледах видеата но не ми стана ясно как да направя това което искам :
1.Черния дъсковиден background да изчезне.
2 Левия и десния aside да отидат долу , като по маловажна информация.
3. Header и Footer малко да се скъсят.
4. Навигацията да не е така отрязана но пак да е inline тоест елементите да са едно до друго.

от Svetoslav1987 (1061 точки)

0
Като отвориш сайта в Chrome и с десен бутон дадеш Inspet element можеш да си играеш със стиловете (да ги създаваш, променяш и изключваш. Само с изключване на стилове, примерно, ще разбереш че фона ти се създава от: body { background-image: url('back_image.jpg'); } и #main-container { width: 90%; margin: 40px auto;<==ТОВА!!!! background-color: #fff; color: #333; } В media query трябва да промениш точно тези полета (background-image и margin)

от dany90 (1340 точки)


0

За допълнително вдъхновение, би могъл да хвърлиш едно око на 10 от най-популярните responsive framework-ове, а защо не и да базираш свой собствен на някой от тях.


от stoberov (3451 точки)


1
Има два начина на използване на media queries - вътре в друг .css файл или като отделен .css файл. В случай, че сложиш кода в основния ти .css файл, трябва да използваш синтаксис подобен на предложения от dany90. Конкретно за твоя случай можеш да потърсиш вариации на кода. Ако ще пишеш css в отделен файл, тогава можеш да го линк-неш от head секцията по следния примерен начин:

Идеята на queries е, че при зададените от теб параметри на екрана те добавят код към css, чрез който можеш да променяш основния си css код. В твоя случай примерно на body-то ще зададеш background: none в query-то, което ще премахне дифолтния фон на страницата.
Wrapper-a на съдържанието e нужно да получи width: 100% (Имай предвид, че трябва да извадиш paddings и че ще имаш margins). А за да поставиш различни блокови елементи един до друг, ще трябва да им смениш float, width, може би position и прочие. Десният aside пада на следващия ред от само себе си, когато контента ти е 100%. За левия - не съм експериментирала, но със сигурност има много решения в нета.
Ако искаш header-a и footer-a да бъдат по-"ниски" променяш height-a им (намаляване на шрифта, на padding-и, вътрешни margin-и също ще помогне).
А за навигацията най-добрият начин е тя да се намира в някакъв wrapper (или да стилизираш цялото ul, ако е правена чрез списък), на който да зададеш широчина 100%, а на всеки бутон фиксирана широчина в %.
Общо взето като схванеш принципите на responsive останалото е проба-грешка, опит...

от Galya (786 точки)