[CSS][HTML]Dodanie responsywności Opcje

[Contritio]

Witam serdecznie

Obsługuję jedną stronę internetową, która została napisana w normalnych rozdzielczościach. Mam obecnie za zadanie przerobić ją na responsywną. Wiem, że aby to zrealizować musiałbym przerobić całą templatkem jednak chcę zostawić taką obecnie jaka jest. Dlatego pomyślałem, aby stworzyć responsywność to stworzę identyczną wersje na frameworku bootstrapa. Na serwerze będą umieszczone również pliki w raz ze starą templatką ale kwestią jest rozdzielić te pliki tak, aby dane urządzenie wychwytywało pod daną rozdzielczość stronę. Pytanie są moje zatem:

Jak powinienem zakodować index.html aby po wejściu poprzez smartfon/tablet/komputer otwierała się odpowiednia rozdziałka
Jak umieścić pliki na serwerze. Czy do obecnych plików mogę dodać np "smartfon" , "tablet" z których będzie wyłapywany index.html w raz z plikami obecnej templatki?

Dowiedziałem się, że należy do tego wykorzystać Media Queries w html.

Pilnie proszę o pomoc

Dziękuje

Ten post edytował Contritio 10.07.2014, 12:23:11

[markuz]

Media Queries w CSS

Ja na twoim miejscu bym nie przerabiał szablonu na bootstrap-a.
Dodaj sobie nowy plik mobile.css a w nim reguły media queries dla danych rozdzielczości (nie wiem ile "stopni" rozdzielczości chcesz obsługiwać).
Następnie w tych regułach umieszczasz zmodyfikowane style elementów twojego szablonu np.

index.html

[HTML] pobierz, plaintext 
<div class="main"><h1>Hello</h1></div>
[HTML] pobierz, plaintext 

style.css

[CSS] pobierz, plaintext 
.main { width: 1000px; margin: 0 auto; background: #000; }
.main h1 { color: #fff; font-size: 30px; }
[CSS] pobierz, plaintext 

mobile.css

[CSS] pobierz, plaintext 
@media all and (max-width: 500px) {
    .main { width: 320px; }
    .main h1 { font-size: 18px; }
}
[CSS] pobierz, plaintext