Responsive full width site

Salut, am nevoie de ceva ajutor, am primit un design full width (1920px) si am intampinat foarte multe probleme la responsive, care sunt rezolutiile pentru care faceti responsive, sau cum se procedeaza eu nu am mai facut asa ceva si vreau sa stiu parerile voastre…!!
Multumesc!!

1 Like

Vezi discuția asta: Ce înseamnă Responsive Design?

Tl;dr: toate.

1 Like

depinde de stilul design-ului (fluid sau nu)
de cele mai multe ori imi e de ajuns https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Dacă nu-s specificate, eu nu lucrez cu rezoluții. N-aș spune responsive, ci adaptive. Adică site-ul ar trebui să afișeze perfect pe orice device, indiferent de rezoluție.

Și creezi media queries în funcție de content. De fapt, cred că noțiunea de responsive e înțeleasă greșit. Nu adaptezi contentul pentru un anumit device (sau design), ci adaptezi designul pentru contentul de care dispui.

Media queries fixe au apărut, zic eu, de lene, pentru conveniență și din nevoia UNORA de standardizare.

setezi breaking points in functie de design-ul tau. Treaba cu predefinirea rezolutiilor a aparut din comoditate si rapiditate. Dar nu intotdeauna se mula pe cerinte

Mai bine ne arati design-ul. :slightly_smiling_face:

1 Like

Daca folosesti CSS grid sau flexbox asa cum trebuie ar trebui sa fie trivial. Nici macar n-ai nevoie de media queries daca nu vrei sa ascunzi un anumit element, faci ceva ce nu incape sa se mute elegant mai jos, sa se scaleze cu rezolutia.

Găsești aici breakpoints în funcție de device.
Ideal ar fi ca si designul să urmărească astfel de breakpoints.
Pentru că cine le-a făcut așa le-a făcut după market share al device-urilor.

Se poate de vazut home page aici: http://miabella.cherry.agency/

Astea mi-au atras atentia cel mai mult:

html * {
    max-height: 1000000px;
}

Cred ca’i un template copiat de pe net si nu stie sa-l ajusteze la nevoile lui, dupa CSS vorbind… :troll:

eu v-am aratat doar design-ul…!!

Ce probleme intampini ?

e prima data cand trebuie sa fac machetarea la un design full width, si nu stiu care e procedura (se urmaresc niste break-points) sau utilizez container(si o sa fie full width doar pe rezolutia maxima din design) ???
Din aceasta cauza am cerut parerea pe forum.

In primul rand foloseste un framework: Bootstrap (https://getbootstrap.com/), Bulma (https://bulma.io/),Tailwind (https://tailwindcss.com/) - cel din urma doar daca esti Pro.

In al doilea rand trebuie sa-ti faci structura pentru sidebar:

<body>
    <div class="sidebar">...</div> <!-- il pozitionezi fix, width fix -->
    <div class="content-wrapper">...</div> <!-- margin-left: sidebar-width -->
</body>

Acum in .content-wrapper poti sa faci un site obisnuit cu .container-fluid.

Multumesc mult pentru sfat!!!