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!
Metoda pentru Responsive Design
-
- Mesaje:45
Metoda pentru Responsive Design
MarPlo
Mesaje:4343
Salut,
Folosesc setari css in fisiere css pentru ferestre @media diferite. De exemplu:
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:
- 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.
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" />
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);
});
cata1241
Mesaje:45
Interesant, multumesc pentru raspunsul detaliat!
Subiecte similare
- Regex pentru adrese
PHP - MySQL - XML Primul mesaj
Salut,Ultimul mesaj
As avea si eu nevoie de ajutor! incerc de ceva zile sa dezvolt un regex/ sau o alta solutie, sa vad daca intr-un string mai mare exista o...
Ai putea folosii o functie de localizare IP/browser, dar ar fii ceva individual, facusem eu in trecut o functie, ceva de verificare IP si blocare pe... - Proteina genetică pentru vindecarea paraliziei
Handicap Într-un nou studiu, oamenii de știință germani au restabilit capacitatea de a merge la șoareci paralizați după o leziune completă a măduvei spinării....