[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 

[Contritio]

Czyli wg tego musiałbym przerabiać cały szablon strony a to jest ogrom roboty.
Każdy bowiem element jakim jest div itd.?
Z tego co wywnioskowałem, to obecnych elementów na stronie jakie mam to nie dotykam, zaś tworzę nowy plik .css w którym dodaje nowe reguły z media Queries?
Typu jeżeli mam danego diva o podanej szerokości i wysokości to zmieniam mu zupełnie parametry?
A coś zaś z elementami jakie są w niego wpisane, czy wówczas ułożą się pionowo?

Ten post edytował Contritio 10.07.2014, 13:45:20

[markuz]

Nikt nie powiedział, że roboty będzie mało - przepisanie szablonu na Bootstrap też Ci trochę zajmie To co wybierzesz to twoja sprawa. Mi wygodniej było by napisać samemu bez zmiany struktury kodu html.

Chociaż struktura też się może zmieniać, mogą dojść nowe elementy js np. hovery na mobile/tablet nie działają - wszystko trzeba przerobić na kliknięcia.

To jak Ci się elementy ułożą w div-ie wiesz tylko ty - bo masz kod źródłowy.
Otwórz sobie przeglądarkę, zmniejsz okno i pisz i testuj.

[Contritio]

Nikt nie powiedział, że roboty będzie mało - przepisanie szablonu na Bootstrap też Ci trochę zajmie To co wybierzesz to twoja sprawa. Mi wygodniej było by napisać samemu bez zmiany struktury kodu html.

Chociaż struktura też się może zmieniać, mogą dojść nowe elementy js np. hovery na mobile/tablet nie działają - wszystko trzeba przerobić na kliknięcia.

To jak Ci się elementy ułożą w div-ie wiesz tylko ty - bo masz kod źródłowy.
Otwórz sobie przeglądarkę, zmniejsz okno i pisz i testuj.

Rozumiem dziękuje za pomoc, jeżeli będę miał kolejne pytania to mogę tu pisać?

Poki co jestem w pracy i za bardzo nie mogę tego realizować.

Generalnie chodziło mi o stworzenie zupełnie nowej templatki specjalnie pod bootstrapa.
Kwestia czy wczytywało od danego urządzenia określoną rozdzielczość.
Np pod telefon wyłapywało by pod bootstrapa zaś pod PC normalną, obecną templatke

[markuz]

Nie polecam Ci jednak tworzyć 2 wersji -> Bootstrap dla mobile/tablet a normalny dla desktop. Każda modyfikacja w szablonie będzie musiała być wykonana w 2 miejscach. Wybierz pomiędzy samym Bootstrapem albo własnymi media queries i stwórz 1 szablon dla wielu urządzeń jednocześnie.

W js też możesz wykrywać szerokość ekranu i np. podmieniać hovery na kliknięcia itp.

Ten post edytował markuz 10.07.2014, 15:11:32

[Pyton_000]

Chyba szybciej będzie na podstawie obecnego szablonu zrobic nową wersję. Wiem że jest to dużo roboty ale zrobisz sobie porządek

[Contritio]

No, wszystko już jasne, ale jak zrobić w takim razie, na bootstrapie czy też i nie?

[Pyton_000]

Nie pokazałeś obiektu badań.