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
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
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....
- Pavaje solare pentru alimentare cu energie
Stiri Deosebite O companie de tehnologie din Ungaria foloseşte plastic reciclat pentru a produce panouri solare încorporate în pavaje, care pot susţine alimentarea...
- Material supraconductor, pentru o revoluție energetică
Stiri Deosebite Materialele supraconductoare necesită de obicei temperaturi extrem de reci pentru a funcționa. Dar o nouă descoperire ar putea schimba asta.
Oamenii... - Trenuri cu hidrogen pentru pasageri în Austria
Stiri Deosebite Viena începe un nou capitol în transportul feroviar de pasageri. Până la sfârșitul lunii noiembrie, un tren cu hidrogen va transporta pasageri pentru...
- Buton pentru a crește sau descrește aleator un numar
JavaScript - jQuery - Ajax Primul mesaj
Intrebare rapida:Ultimul mesaj
Cum pot seta un buton care poate crește și /sau descrește aleator un număr la clic?
Acesta este codul pe care îl am....
Poti sa folosesti Math.random() pentru a decide dacă numarul va crește sau nu:
<button id='tst_btn'>Change counter</button>
<h3...