Jakie wy ustawiacie parametry @media screen na css żeby wam się strona dobrze wczytywała na rózne rozdzieczlości i na telefony ?
Bo ja mam takie i nie wiem czy jest w miarę dobrze ?
@media only screen and (min-width: 1810px) {
@media only screen and (min-width: 1410px) and (max-width: 1810px) {
@media only screen and (min-width: 1210px) and (max-width: 1410px) {
@media (700px <= width <= 1210px) {
@media (width < 700px) {
Jakiś czas temu też walczyłem z podobnym problemem - możesz rzucić okiem na ten wątek - CSS i @media: min-width, max-width - jak/którego używać
A co do odpowiedzi wprost na Twoje pytanie - obecnie mam to ustawione w ten sposób:
@import url("/inc/CSS/reset.css");
@import url("/inc/CSS/basestyle.css");
@import url("/inc/CSS/RWD-max.css");
@import url("/inc/CSS/RWD-1799.css") only screen and (max-width: 1799px);
@import url("/inc/CSS/RWD-1399.css") only screen and (max-width: 1399px);
@import url("/inc/CSS/RWD-1199.css") only screen and (max-width: 1199px);
@import url("/inc/CSS/RWD-0991.css") only screen and (max-width: 991px);
@import url("/inc/CSS/RWD-0767.css") only screen and (max-width: 767px);
@import url("/inc/CSS/RWD-0575.css") only screen and (max-width: 575px);
@import url("/inc/CSS/RWD-0319.css") only screen and (max-width: 319px);
Nigdy nie mam sztywnych zakresów dla całej strony.
Każdy element zawsze ma swoje własne zakresy - bo każdy element wygląda inaczej i wymaga innego podejścia.
Celem tego zabiegu jest najlepszy wygląd elementu w każdej rozdzielczości.
Coraz częściej robię także względem kontenera a nie screen co wprowadza dodatkową uniwersalność tak stworzonych elementów/komponentów.
https://www.w3.org/TR/css-contain-3/#container-type
Praktycznie nigdy nie korzystam z media query, tylko w ostateczności lub żeby usunąć elementy dla drukarki. Mamy gridy, flexboxy, minmax, clamp i tym podobne, media query moim zdaniem są przeżytkiem ze starych lat.
Ciężko stwierdzić twardą granicę że przy 991px coś ma wyglądać w ten sposób a na 990px już inaczej. Poza tym nie chce mi się duplikować styli i poprawiać potem w wielu miejscach. Jak już strona ma mieć zupełnie inny wygląd na mobilce to bym przygotował osobną wersję mobilną lub osobny arkusz styli dla mobile, ale nadal bym nie używał media query.
Riddle napisał(a):
Po prostu otwórz swoją stronę na komputerze i telefonie, i zobacz czy wygląda w porządku
Dobra wskazówka, chciałbym żeby 4p było tworzone w ten sposób.
Istnieją narzędzia i pluginy do przeglądarki które pozwalają wyświetlić stronę na różnych rozdzielczościach jednocześnie, przykładowo https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb
