{"id":187,"date":"2023-10-01T17:26:37","date_gmt":"2023-10-01T15:26:37","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=187"},"modified":"2023-10-01T17:40:36","modified_gmt":"2023-10-01T15:40:36","slug":"jednotky","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=187","title":{"rendered":"4. Jednotky"},"content":{"rendered":"<ul>\n<li>zapisuj\u00fa sa ihne\u010f za \u010d\u00edslo ur\u010duj\u00face mno\u017estvo jednotiek<\/li>\n<li>ako odde\u013eova\u010d desatinn\u00fdch miest sa pou\u017e\u00edva bodka<\/li>\n<li>jednotku nie je nutn\u00e9 uv\u00e1dza\u0165 pri hodnote nula<\/li>\n<li>hodnota m\u00f4\u017ee by\u0165 ako kladn\u00e1, tak aj z\u00e1porn\u00e1<\/li>\n<li>absol\u00fatna jednotka ud\u00e1va presn\u00fa mieru<\/li>\n<li>relat\u00edvna jednotka sa vz\u0165ahuje k inej ve\u013ekosti<\/li>\n<\/ul>\n<p>Pr\u00edklad CSS:<\/p>\n<pre><span style=\"color: #0000ff;\">div {\r\n  margin: 1.5em 5% -10px 0;\r\n}<\/span><\/pre>\n<h3>Pixel (px)<\/h3>\n<ul>\n<li>obrazovkov\u00fd bod (ka\u017ed\u00e1 obrazovka m\u00e1 in\u00fa ve\u013ekos\u0165 obrazov\u00e9ho bodu) \u2013 naj\u010dastej\u0161ie 96 px na palec<\/li>\n<li>relat\u00edvna jednotka<\/li>\n<li><strong>pou\u017eitie<\/strong>\u00a0: grafika, (predt\u00fdm sa pou\u017e\u00edvalo na Layout a Responsive design)<\/li>\n<li><strong>nev\u00fdhody<\/strong>\u00a0:\n<ul>\n<li>pou\u017e\u00edvatelia IE9- si nem\u00f4\u017eu prisp\u00f4sobi\u0165 ve\u013ekos\u0165 textov;\u00a0IE10 pon\u00faka funkciu zoom (funkcia je u\u017e dlh\u0161iu dobu be\u017en\u00e1 u konkuren\u010dn\u00fdch prehliada\u010dov), ktor\u00e1 umo\u017e\u0148uje meni\u0165 ve\u013ekos\u0165 str\u00e1nky ako celku<\/li>\n<li>probl\u00e9m s &#8222;polovi\u010dnej ve\u013ekosti&#8220; u Retina displeja<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Percent\u00e1 (%)<\/h3>\n<ul>\n<li>hodnota sa po\u010d\u00edta z ve\u013ekosti rodi\u010dovsk\u00e9ho prvku (v najvy\u0161\u0161ej \u00farovni je n\u00edm okno prehliada\u010da)<\/li>\n<li>relat\u00edvna jednotka (\u010dasto zdeden\u00e1 od rodi\u010da)<\/li>\n<li><strong>pou\u017eitie<\/strong> : texty<\/li>\n<\/ul>\n<pre><span style=\"color: #0000ff;\">body {font-size: 10px;}\r\nh1 {font-size: 240%;} \/* =24px *\/<\/span><\/pre>\n<h3>\u0160tvor\u010d\u00edk (em)<\/h3>\n<ul>\n<li>\u0161\u00edrka ve\u013ek\u00e9ho p\u00edsmena\u00a0<strong>M<\/strong><\/li>\n<li>hodnota sa men\u00ed v z\u00e1vislosti od ve\u013ekosti p\u00edsma<\/li>\n<li>relat\u00edvna jednotka \u2013 aktu\u00e1lna ve\u013ekos\u0165 m\u00f4\u017ee by\u0165 ovplyvnen\u00e1 ve\u013ekos\u0165ou\u00a0<strong>nadraden\u00e9ho prvku<\/strong>\u00a0a vo\u013ebou u\u017e\u00edvate\u013ea<\/li>\n<li><strong>pou\u017eitie<\/strong>\u00a0: rozvrhnutie (layout) dokumentu a box model<\/li>\n<li><strong>nev\u00fdhody<\/strong>\u00a0:\n<ul>\n<li>n\u00e1sobenie ve\u013ekosti pri vnoren\u00fdch prvkoch vi\u010f napr.\u00a0<a class=\"ext\" href=\"http:\/\/clagnut.com\/blog\/348\/\" target=\"_blank\" rel=\"nofollow noopener\">How to size text using ems<\/a>\u00a0(zoznam vnoren\u00fd do zoznamu u\u017e nem\u00e1 ve\u013ekos\u0165 14px ale 20px, \u010fal\u0161ia \u00farove\u0148 u\u017e m\u00e1 ve\u013ekos\u0165 27px at\u010f. \u2013 rie\u0161en\u00edm m\u00f4\u017ee by\u0165 deklar\u00e1cia vnoren\u00fdch prvkov na 1em)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><span style=\"color: #0000ff;\">body {font-size: 10px; \/* font-size: 62.5%; *\/}\r\nh1 {font-size: 2.4em;} \/* =24px *\/\r\np {font-size: 1.4em;} \/* =14px *\/\r\nak {font-size: 1.4em;} \/* =14px <strong>??? <\/strong>*\/\r\nak ak, p \/* etc *\/ {font-size: <strong>1em<\/strong> ;}<\/span><\/pre>\n<p><strong>Pozn\u00e1mky<\/strong>\u00a0:<\/p>\n<ul>\n<li>prvky v jednotk\u00e1ch\u00a0<strong>em<\/strong>\u00a0do seba pokia\u013e mo\u017eno nevn\u00e1rajte, preto\u017ee aktu\u00e1lna ve\u013ekos\u0165 m\u00f4\u017ee by\u0165 ovplyvnen\u00e1 ve\u013ekos\u0165ou nadraden\u00e9ho prvku, vo\u013ebou u\u017e\u00edvate\u013ea a z d\u00f4vodu\u00a0implementa\u010dnej chyby\u00a0IE6-<\/li>\n<li>predvolen\u00e1 ve\u013ekos\u0165 text v prehliada\u010doch b\u00fdva 16px\n<ul>\n<li>16px * 0.625 (tj 62.5%) = 10px<\/li>\n<\/ul>\n<\/li>\n<li>prepo\u010det px na em\n<ul>\n<li>child pixels \/ parent pixels = child ems<br \/>\n12px \/ 10px = 1.2em<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Root em (rem)<\/h3>\n<ul>\n<li>CSS3 zav\u00e1dza nieko\u013eko nov\u00fdch jednotiek, medzi ktor\u00e9 patr\u00ed aj jednotka rem<\/li>\n<li>relat\u00edvna jednotka \u2013 rem jednotka je relat\u00edvna vo\u010di kore\u0148u dokumentu alebo html elementu (umo\u017e\u0148uje definova\u0165 jednu ve\u013ekos\u0165 a z nej odvodzova\u0165 \u010fal\u0161ie po\u017eadovan\u00e9 ve\u013ekosti)<\/li>\n<li><strong>pou\u017eitie<\/strong>\u00a0: texty<\/li>\n<li><strong>nev\u00fdhoda<\/strong>\u00a0: rem jednotka nie je podporovan\u00e1 v Media queries pri prehliada\u010di Chrome (\u00a0Media queries with rem units in Chrome)\u00a0<img loading=\"lazy\" decoding=\"async\" title=\"no\" src=\"http:\/\/tomas.dankovi.info\/sites\/all\/libraries\/ckeditor\/plugins\/smiley\/images\/thumbs_down.gif\" alt=\"no\" width=\"20\" height=\"20\" \/><\/li>\n<li>podpora: IE9+, Safari 5+, Chrome, Firefox 3.6+ (Opera ani vo verzii 11.10 zatia\u013e rem nepodporuje)\n<ul>\n<li>pre prehliada\u010de bez podpory rem je vhodn\u00e9 najprv definova\u0165 ve\u013ekos\u0165 v jednotk\u00e1ch, ktor\u00e9 prehliada\u010d podporuje napr. px alebo pou\u017e\u00edva\u0165\u00a0<strong>percent\u00e1\u00a0<img loading=\"lazy\" decoding=\"async\" title=\"enlightened\" src=\"http:\/\/tomas.dankovi.info\/sites\/all\/libraries\/ckeditor\/plugins\/smiley\/images\/lightbulb.gif\" alt=\"enlightened\" width=\"20\" height=\"20\" \/><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><span style=\"color: #0000ff;\">html {font-size: 10px; font-family: sans-serif; \/* font-size: 62.5%; *\/}\r\nbody {\r\n  font-size: 16px; \/* IE8 *\/\r\n  font-size: 1.6 <strong>rem<\/strong> ; \/* =16px, =12pt *\/\r\n}\r\nh1 {\r\n  font-size: 24px;\r\n  font-size: 2.4 <strong>rem<\/strong> ; \/* =24px *\/\r\n}<\/span><\/pre>\n<ul>\n<li>pozn\u00e1mky\n<ul>\n<li>768px = 60m (80% font-size sans-serif) ~ max-width page width resolution 800x600px<\/li>\n<li>30-80 znakov na riadok<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Typografick\u00fd bod (pt)<\/h3>\n<ul>\n<li>hodnota je odvoden\u00e1 od anglick\u00e9ho palca<\/li>\n<li>1 pt = 72 in (\u010dasto sa pou\u017e\u00edva 300 pt na palec)<\/li>\n<li>absol\u00fatna jednotka<\/li>\n<li><strong>pou\u017eitie<\/strong>\u00a0: tla\u010d<\/li>\n<\/ul>\n<h3>Ex (ex)<\/h3>\n<ul>\n<li>v\u00fd\u0161ka mal\u00e9ho p\u00edsmena\u00a0<strong>x<\/strong><\/li>\n<li>hodnota sa men\u00ed v z\u00e1vislosti od ve\u013ekosti p\u00edsma<\/li>\n<li>relat\u00edvna jednotka \u2013 aktu\u00e1lna ve\u013ekos\u0165 m\u00f4\u017ee by\u0165 ovplyvnen\u00e1 ve\u013ekos\u0165ou nadraden\u00e9ho prvku a vo\u013ebou u\u017e\u00edvate\u013ea<\/li>\n<\/ul>\n<h3>Centimeter (cm)<\/h3>\n<ul>\n<li>1 cm = 10 mm<\/li>\n<li>absol\u00fatna jednotka<\/li>\n<\/ul>\n<p><strong>Pozn\u00e1mka<\/strong>\u00a0: vzh\u013eadom na r\u00f4zne rozl\u00ed\u0161enia obrazovky funguje spo\u013eahlivo sn\u00e1\u010f len pri tla\u010di.<\/p>\n<h3>Milimeter (mm)<\/h3>\n<ul>\n<li>1 mm = 3.78 px<\/li>\n<li>absol\u00fatna jednotka<\/li>\n<\/ul>\n<p><strong>Pozn\u00e1mka<\/strong>\u00a0: vzh\u013eadom na r\u00f4zne rozl\u00ed\u0161enia obrazovky funguje spo\u013eahlivo sn\u00e1\u010f len pri tla\u010di.<\/p>\n<h3>Palec (in)<\/h3>\n<ul>\n<li>1 in = 2,54 cm, 1 in = 96 px<\/li>\n<li>absol\u00fatna jednotka<\/li>\n<\/ul>\n<p><strong>Pozn\u00e1mka<\/strong>\u00a0: vzh\u013eadom na r\u00f4zne rozl\u00ed\u0161enia obrazovky funguje spo\u013eahlivo sn\u00e1\u010f len pri tla\u010di.<\/p>\n<h3>Pica alebo tie\u017e cicero (pc)<\/h3>\n<ul>\n<li>1 pc = 12 pt, 1 pc = 1\/6 in, 1 pc = 16 px<\/li>\n<li>absol\u00fatna jednotka<\/li>\n<\/ul>\n<p><strong>Pozn\u00e1mka<\/strong>\u00a0: vzh\u013eadom na r\u00f4zne rozl\u00ed\u0161enia obrazovky funguje spo\u013eahlivo sn\u00e1\u010f len pri tla\u010di.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>zapisuj\u00fa sa ihne\u010f za \u010d\u00edslo ur\u010duj\u00face mno\u017estvo jednotiek ako odde\u013eova\u010d desatinn\u00fdch miest sa pou\u017e\u00edva bodka jednotku nie je nutn\u00e9 uv\u00e1dza\u0165 pri hodnote nula hodnota m\u00f4\u017ee by\u0165 ako kladn\u00e1, tak aj z\u00e1porn\u00e1 absol\u00fatna jednotka ud\u00e1va presn\u00fa mieru relat\u00edvna jednotka sa vz\u0165ahuje k inej ve\u013ekosti Pr\u00edklad CSS: div { margin: 1.5em 5% -10px 0; } Pixel (px) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-187","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=187"}],"version-history":[{"count":2,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/187\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/187\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}