W jaki sposób najlepiej zrobić responsywna stronę? Do tej pory nie natknęłam się na ten problem, ale teraz.. no cóż. Robię to na zasadzie wykrywania rozdzielczości użytkownika i zmieniam odpowiednio proporcje divow. Zazwyczaj wersje dla PC mam ustawiona w PX, a telefony, tablety w %. Czy to dobry sposób? I tutaj też rodzi się moje pytanie. Bo mając ustawione bordery w PX nie mogę ich zmienić na % (chyba to jest nieobsługiwane). Więc strona nie wygląda równo gdy wszelkie elementy strony w wersji mobilnej mam w %, a bordery w PX. Ogólnie to już wyzbyłem się nawet tych borderów z całej strony, ale w inputach już muszą zostać, i to mi psuje wygląd. Poradzicie coś Misiaczki?
0
0
Zrób sobie tzw. siatkę (grid) i z pomocą media queries będziesz mógł dostosować rozmiary. Responsywną stronę można stworzyć bardzo szybko wykorzystując właśnie dobrze dobraną siatkę. Jeśli nie znasz dobrze CSS to nie bierz się za CSS Grid tylko opanuj podstawy.
0
to co ty masz tam za bordery? O.o zazwyczaj stosuje się border 1px który tym 1px jest i musi być wszędzie
0
Pytanie z gatunku: zgadnij, co autor maił na myśli.
0
ściągnij gotowy grid
https://github.com/m-spyratos/bootstrap-4-grid
http://getskeleton.com/
https://milligram.io/grids.html
https://simplegrid.io/
https://fluidable.com/
i sobie wyedytuj po swojemu
0
Dzięki za zainteresowanie, ale mimo wszystko liczyłem na pomoc z tymi borderami. Na razie nie chciałbym korzystać z różnych gridów czy frameworków. Po prostu sobie robię to przez @media (max-width: 1100px)... i tylko ciekawi mnie ta sprawa z borderami :D Wszystko inne mi działa - strona jest w pełni responsywna, ale chciałbym by strona była "dopięta do ostatniego piksela" :D
Najbardziej mnie rozbawił komentarz "to co ty masz tam za bordery? O.o zazwyczaj stosuje się border 1px który tym 1px jest i musi być wszędzie" :D W zasadzie mam 1px. I trochu mnie bolą oczka jak widzę, że input jest przesunięty o 2px w prawo :P
No dobra, to już może sobie odpuszczę te bordery. Powiedzcie chociaż czy strona w pikselach na PC i procentach mobilnie jest ok?
1
niech cie nie dziwią, jeśli coś ci się przesuwa o 2px to znaczy, że nie znasz podstaw cssa i masz coś skopane, ale nikt ci nie pomoże nie widząc kodu a najlepiej dema z tym efektem.
0
Ok, no to tak. Tutaj przykład. Zrobiłem to na codepen.io, abyś miał wygodniej. Przy szerokości większej niż 500px - jest OK. Natomiast problem się zaczyna poniżej tej szerokości. https://codepen.io/anon/pen/vzvzBV
3
masz conajmniej 3 możliwości:
- dla wrappera nie dawać padding 5% tylko wycentrować wnętrze
- dla inputa użyć zamiast width: 90% to width: calc(90% - 2px)
- zrobić kontener dla inputa i input zawsze na 100%
1
* { box-sizing: border-box;}