[{"@context":"https:\/\/schema.org\/","@type":"Article","@id":"https:\/\/www.phgia.cz\/gro-webu-s-responzivnim-designem\/#Article","mainEntityOfPage":"https:\/\/www.phgia.cz\/gro-webu-s-responzivnim-designem\/","headline":"Gr\u00f3 webu s responzivn\u00edm designem","name":"Gr\u00f3 webu s responzivn\u00edm designem","description":"Responzivn\u00ed design je prvkem, kter\u00fd se objevil p\u0159ed dev\u00edti lety. Jeho smyslem je stylov\u00e1n\u00ed html a CSS dokument\u016f tak, aby sv\u00fdm vzhledem a funk\u010dnost\u00ed uspokojili u\u017eivatele mobiln\u00edch telefon\u016f, tablet\u016f a v\u0161emo\u017en\u00fdch za\u0159\u00edzen\u00ed. Od pixel\u016f k relativn\u00edm jednotk\u00e1m V prvn\u00ed \u0159ad\u011b p\u0159ech\u00e1z\u00edme od absolutn\u011b zadan\u00fdch rozm\u011br\u016f jako je v\u00fd\u0161ka nebo \u0161\u00ed\u0159ka elementu k jednotk\u00e1m, kter\u00e9 tyto rozm\u011bry zad\u00e1vaj\u00ed relativn\u011b. … ","datePublished":"2019-09-17","dateModified":"2023-05-26","author":{"@type":"Person","@id":"https:\/\/www.phgia.cz\/author\/#Person","name":"","url":"https:\/\/www.phgia.cz\/author\/","identifier":1,"image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4860d213c5bedfa07ff2b166ff7b069759f9dbf79eae813578c75f9f8cb939b7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4860d213c5bedfa07ff2b166ff7b069759f9dbf79eae813578c75f9f8cb939b7?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"phgia.cz","logo":{"@type":"ImageObject","@id":"\/logo.png","url":"\/logo.png","width":600,"height":60}},"image":{"@type":"ImageObject","@id":"https:\/\/www.phgia.cz\/wp-content\/uploads\/img_a355155_w3814_t1569572226.jpg","url":"https:\/\/www.phgia.cz\/wp-content\/uploads\/img_a355155_w3814_t1569572226.jpg","height":0,"width":0},"url":"https:\/\/www.phgia.cz\/gro-webu-s-responzivnim-designem\/","about":["IT"],"wordCount":404,"articleBody":"Responzivn\u00ed design je prvkem, kter\u00fd se objevil p\u0159ed dev\u00edti lety. Jeho smyslem je stylov\u00e1n\u00ed html a CSS dokument\u016f tak, aby sv\u00fdm vzhledem a funk\u010dnost\u00ed uspokojili u\u017eivatele mobiln\u00edch telefon\u016f, tablet\u016f a v\u0161emo\u017en\u00fdch za\u0159\u00edzen\u00ed.\tOd pixel\u016f k relativn\u00edm jednotk\u00e1mV prvn\u00ed \u0159ad\u011b p\u0159ech\u00e1z\u00edme od absolutn\u011b zadan\u00fdch rozm\u011br\u016f jako je v\u00fd\u0161ka nebo \u0161\u00ed\u0159ka elementu k jednotk\u00e1m, kter\u00e9 tyto rozm\u011bry zad\u00e1vaj\u00ed relativn\u011b. Mo\u017enost\u00ed je n\u011bkolik a ka\u017ed\u00e1 m\u00e1 sv\u00e9 opodstatn\u011bn\u00ed·         Procenta·         Em: relativn\u00ed v\u016f\u010di velikosti p\u00edsma na elementu, standardem je 1 em = 16 px, u\u017eivatel si v\u0161ak tuto hodnotu m\u016f\u017ee zm\u011bnit v nastaven\u00ed prohl\u00ed\u017ee\u010de, nap\u0159\u00edklad pokud \u0161patn\u011b vid\u00ed. V\u00fdhodou je, \u017ee tato zm\u011bna nijak neovlivn\u00ed vzhled str\u00e1nky a v\u017edy se p\u0159izp\u016fsob\u00ed.U obou v\u0161ak plat\u00ed vzorec pro flexibiln\u00ed struktury (po\u017eadovan\u00e1 \u0161\u00ed\u0159ka [px]) \/ (\u0161\u00ed\u0159ka parent elementu [px]) = velikost [em]. Pokud jej vyn\u00e1sob\u00edme 100, dostaneme procentu\u00e1ln\u00ed hodnotu. P\u0159ech\u00e1z\u00edme tak\u00e9 ze v\u0161ech parametr\u016f width k max-width.  \tNastaven\u00ed obrazovky pomoc\u00ed meta-tag\u016fV r\u00e1mci hlavi\u010dky souboru html, m\u016f\u017eeme odk\u00e1zat pomoc\u00ed meta tagu link (tedy tag, kter\u00fd obvykle pou\u017e\u00edv\u00e1me pro p\u0159ipojen\u00ed css souboru) s atributem media na r\u016fzn\u00e9 soubory. Zde si tak\u00e9 lze zvolit minim\u00e1ln\u00ed a maxim\u00e1ln\u00ed \u0161\u00ed\u0159ku obrazovky v pixelech, kdy se n\u00e1m tyto stylovac\u00ed soubory pou\u017eij\u00ed.\tCSS Media QueriesStejn\u00e9ho efektu jako u meta tag\u016f m\u016f\u017eeme dos\u00e1hnout i v CSS souboru pomoc\u00ed k\u00f3du@media (max-width: 1000px) {Zde se p\u00ed\u0161ou klasick\u00e9 selektory}Tato lze selektivn\u011b vymazat ur\u010dit\u00e9 prvky p\u0159i zmen\u0161uj\u00edc\u00ed se \u0161\u00ed\u0159ky okna a t\u00edm p\u0159izp\u016fsobit str\u00e1nku pro men\u0161\u00ed za\u0159\u00edzen\u00ed. Standardn\u00ed rozm\u011bry r\u016fzn\u00fdch obrazovek lze dohledat na internetu a v\u00fdslednou str\u00e1nku je nejlep\u0161\u00ed vyzkou\u0161et na t\u011bchto za\u0159\u00edzen\u00edch nebo skrze p\u0159\u00edslu\u0161n\u00e9 internetov\u00e9 str\u00e1nky.\tFlexibiln\u00ed obr\u00e1zkyNejlep\u0161\u00ed je si nastylovat v\u0161echny obr\u00e1zky s max-width: 100 % a height: auto. T\u00edm zaru\u010d\u00edme, \u017ee se budou v\u017edy pohybovat v hranic\u00edch sv\u00e9ho obalovac\u00edho elementu.                                                                                                                                                                                                                                                                                                                                                                                        3.9\/5 - (9 votes)        "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Gr\u00f3 webu s responzivn\u00edm designem","item":"https:\/\/www.phgia.cz\/gro-webu-s-responzivnim-designem\/#breadcrumbitem"}]}]