Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Responsywna - oddzielne style
Forum PHP.pl > Forum > Przedszkole
maniek74
Witam

Przeważnie na stronach responsywnych jest stosowane rozwiązanie jednego arkusza stylów pod stronę, ale przecież jest rozwiązanie owiele bardziej czytelne tj. pod każdy układ zastosować oddzielne style:

  1. <link rel="stylesheet" type="text/css" media="only screen and (min-width: 100px) and (max-width: 480px)" href="/css/stylePanel_480.css">
  2. <link rel="stylesheet" type="text/css" media="only screen and (min-width: 481px) and (max-width: 800px)" href="/css/stylePanel_800.css">
  3. <link rel="stylesheet" type="text/css" media="only screen and (min-width: 801px) and (max-width: 1024px)" href="/css/stylePanel_1024.css">
  4. <link rel="stylesheet" type="text/css" media="only screen and (min-width: 1025px)" href="/css/stylePanel.css">
  5.  


Taki układ jest prawie nie stosowany, sprawdziłem to na kilkudziesięciu stronach z poradami na temat reponsywności i każdy stosuje:

  1.  
  2. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  3.  
  4. ....................
  5.  
  6. }
  7.  
  8.  
  9. @media only screen and (min-width : 321px) {
  10. ....................
  11.  
  12. }
  13.  
  14. itd


Dlaczego?

Pozdrawiam
fate
zapytania do servera
4:1
to na czym najłatwiej poprawic szybkosc strony
maniek74
a jaka różnica jest jesli załaduje 4 pliki po 50kb lub 1 po 200kb, pozatym sam css nie powoduje chyba zamulenia strony, sam css wydaje mi się że to będzie różnica w setnych sekundy, niezauważalna dla użytkownika.

Tak mi się wydaje być może się mylę.

Pozdrawiam
sf
Cytat(maniek74 @ 4.01.2015, 09:19:46 ) *
a jaka różnica jest jesli załaduje 4 pliki po 50kb lub 1 po 200kb, pozatym sam css nie powoduje chyba zamulenia strony, sam css wydaje mi się że to będzie różnica w setnych sekundy, niezauważalna dla użytkownika.


Im mniej plików się ładuje tym strona ładuje się szybciej. Dlatego wielu programistów wszystkie pliki js łączy w jeden, podobnie css, w przypadku obrazków często się stosuje sprity. Google m.in. w pozycjonowaniu sprawdza szybkość ładowania strony, jest to mały ułamek całego wyliczania pozycji, ale jest. Jak potrzebujesz wyliczenia o ile szybciej taka strona się ładuje to na pewno jest trochę materiałów o tym w sieci, wystarczy poszukać. Głównie chodzi o to, że każde żądanie do serwera jest osobne, czyli zajmujesz zasoby apache czy innego serwera http.

https://developers.google.com/speed/pagespeed/insights/
korek_a
Nie wiem jakie ty poradniku czytasz ale umieszczamy jedne z minifikowany plik css.

Po za tym w XXI wieku korzystam z prekobilatorów które pozwalają nam na odpowiednie układanie "logiki" (LOL) w plikach css np.:http://sass-lang.com/
fate
1.
sciąganie danych przy obecnych łączach trwa krócej niż łączenie się z serwerem (ping) lub ściślej coraz krócej
2.
tak to milisekundy ale w % to łatwy wzrost wydajności łopatologicznie o 300% w tym sektorze, zminimializuj sobie napisany kod o 300% to będzie znacznie trudniejsze lub niemozliwe,w tym rzecz

nie zgadzam się tez z korek_b czasem moze lepiej samemu przemyslec temat niz wierzyć ślepo w kazdy znaleziony poradnik w necie ktory mogl napisac gimnalista albo seo bot.
maniek74
1. Nie korzystam z żadnych gotowców, zawsze piszę cołość sam, wyjątkiem jQuery. Może nie jest to za piękny kod ale mam pewność że nie ma żadnych śmieci.
2. Jest to pytanie retoryczne dlaczego tak jest a nie napisałem że tak piszę,
3. Biorąc pod uwagę łatwiejszą edycje css przy pisaniu strony jest to dobre rozwiązanie przy tworzeniu, bo nie szuka się w tysiącach lini, często mi się zdarza że chce coś poprawić w bloku na komórki a modyfikuje w bloku na tablety,
4. Czytam wiele poradników i stron na dany temat, nigdy jeden i wyciągam średnią rozwiązań. Czasami dobrze jest dać cos na forum pod dyskusję, tak jak to teraz jest, poczytać jak ludzie robią i wtedy pisać swój kod.

Pozdrawiam


fate
manku ostatnie zdanie jest do korka chyba nie ogarnąłeś że się tak tłumaczysz
pliki css mozesz trzymac sobie oddzielnie na serwerze i sobie je czytac i zmieniac a skryptem laczysz go w 1 dodatkowy plik i to zminifikowany i w headzie zaczytujesz tylko ten 1 zespolony css tak sie robi.
maniek74
No właśnie do korka pije a nie do Ciebie, nie nawidze takiego tonu wypowiedzi jak on napisał, u mnie Ty masz browca
fate
bez kitu, nie ogarnałem haha Lkingsmiley.png
by_ikar
Dodatkowo przeglądarki mają limit połączeń które mogą nawiązać w tym samym czasie do jednego hosta. Więc jak tych plików będziesz miał 20, a limit wynosi 5 (css, obrazki, js, czcionki etc), to na któreś pliki przeglądarka będzie musiała czekać, efektem tego będzie dziwne pierwsze wejście na stronę, że dziwnie się będzie doczytywać etc. Dlatego lepiej jest to lepiej łączyć potem w jeden plik, niż w kilka.

Więcej połączeń, to też większe obciążenie dla webserwera, taki apache średnio lubi sporą ilość requestów..
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.