Metoda pentru Responsive Design

[cata1241]

Salut, Marplo, am si eu o intrebare pentru tine, dat fiind faptul ca probabil ai o experienta mult mai mare.Ce metoda folosesti pentru crearea unui design responsiv, cu alte cuvinte, folosesti un grid system sau folosesti doar regulile @media.

Multumesc de raspuns!

Salut,
Folosesc setari css in fisiere css pentru ferestre @media diferite. De exemplu:

Cod: Selectaţi tot

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" media="only screen and (max-width: 601px)" href="template/style_mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 602px)" href="template/style_pc.css" />

Si ceva javascript, care sa detecteze rezolutia ferestrei si in functie de ea sa adauge sau sa modifice elemente html din cod.
Un exemplu cu o parte din codul js de pe site:

Cod: Selectaţi tot

// returns an object with height and width of the window
function winSize() {
 // returns an object with height and width of the window
  var win_size = {};
  if (self.innerHeight) {
    win_size.height = self.innerHeight;
    win_size.width = self.innerWidth;
  } else if (document.documentElement && document.documentElement.clientHeight) {
    win_size.height = document.documentElement.clientHeight;
    win_size.width = document.documentElement.Width;
  } else if (document.body) {
    win_size.height = document.body.clientHeight;
    win_size.width = document.body.clientWidth;
  }
  return win_size;
}
var win_size = winSize();

//In this function you can add JS settings to be executed according to window width (win_w)
var setOnDevice = function(win_w){
  if(win_w < 601){
    //sets for mobile..
  }
  else {
    //sets for desktop...
  }
}
setOnDevice(win_size.width);

// when Resize browser, call function setOnDevice()
window.addEventListener('resize', function(e){
 win_size = winSize();
 setOnDevice(win_size.width);
});

- Se poate si fara javascript daca nu e de facut modificari in codul html dupa lungimea ferestrei; doar cu setari in css in functie de @media.

Interesant, multumesc pentru raspunsul detaliat!