{"id":772,"date":"2020-05-07T21:11:03","date_gmt":"2020-05-07T21:11:03","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=772"},"modified":"2020-05-10T20:14:52","modified_gmt":"2020-05-10T20:14:52","slug":"html-vaateava-ja-kohanduv-kujundus","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-vaateava-ja-kohanduv-kujundus\/","title":{"rendered":"HTML vaateava ja kohanduv kujundus"},"content":{"raw":"Kohanduva kujunduse eesm\u00e4rk on, et meie loodav veebileht n\u00e4eks hea v\u00e4lja igas suuruses ekraanidel ja erinevatel seadmetel.\r\n<h1>Vaateava (<em>viewport<\/em>)<\/h1>\r\nVaateava ehk<em> viewport<\/em> v\u00f5imaldab disaineritel luua kohanduvat (<em>responsive<\/em>) kujundust vastavalt veebilehe vaatamiseks kasutatava seadme ekraani suurusele. Vaateava annab brauserile juhised, kuidas veebilehe m\u00f5\u00f5tusid hallata, elemente suurendada\/v\u00e4hendada.\r\n\r\nVaateava defineeritakse j\u00e4rgmise meta-elemendiga veebilehe p\u00e4ises:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/pre>\r\nAtribuudi content v\u00e4\u00e4rtuse sisuks on omakorda vaateava atribuudid:\r\n<ul>\r\n \t<li><code>width=device-width<\/code> \u2013 k\u00e4sib lehe suuruse seada vastavusse kasutatava seadme ekraaniga;<\/li>\r\n \t<li><code>initial-scale=1.0<\/code> \u2013 m\u00e4\u00e4rab lehe laadimisel kasutatava esialgse suurendusastme (<em>zoom level<\/em>).<\/li>\r\n<\/ul>\r\nAtribuutidel v\u00f5ib olla ka teistsuguseid v\u00e4\u00e4rtuseid.\r\n<ul>\r\n \t<li><code>width<\/code> v\u00e4\u00e4rtuseks v\u00f5ib olla ka konkreetne arv piksleid, n\u00e4iteks <code>width=640<\/code>. Seda kasutatakse, kui on teada, et leht vajab minimaalselt teatavat laiust aga m\u00f5nel seadmel v\u00f5ib olla sellest v\u00e4iksem ekraan.<\/li>\r\n<\/ul>\r\nOlemas on veel atribuudid:\r\n<ul>\r\n \t<li><code>height<\/code> \u2013 mis on kasulik, kui elementide asukoht muutub vastavalt vaateava k\u00f5rgusele. \u00dcks v\u00f5imalikke v\u00e4\u00e4rtuseid on <code>device-height<\/code>.<\/li>\r\n \t<li><code>maximum-scale<\/code> \u2013 m\u00e4\u00e4rab maksimaalse v\u00f5imaliku suurendusastme, v\u00e4\u00e4rtuste vahemik on &gt; 0 kuni 10 ja vaikev\u00e4\u00e4rtuseks 5;<\/li>\r\n \t<li><code>minimum-scale<\/code> \u2013 m\u00e4\u00e4rab minimaalse v\u00f5imaliku suurendusastme, v\u00e4\u00e4rtuste vahemik on &gt; 0 kuni 10 ja vaikev\u00e4\u00e4rtuseks 0,25;<\/li>\r\n \t<li><code>user-scalable<\/code> \u2013 m\u00e4\u00e4rab, kas kasutaja saab suurendusastet muuta, v\u00e4\u00e4rtusteks \u201eyes\u201c (vaikev\u00e4\u00e4rtus) ja \u201eno\u201c.<\/li>\r\n<\/ul>\r\nN\u00e4iteks v\u00f5ib olla soov luua kindla suurusega veebirakendust, mille suurust muuta ei saa:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;meta name=\"viewport\" content=\"user-scalable=no,width=device-width\"&gt;<\/pre>\r\nP\u00e4rast vaateava kasutuselev\u00f5ttu saame kasutada j\u00e4rgmiseid m\u00f5\u00f5t\u00fchikuid, mille abil muuta elementide paigutust ja suurust:\r\n<ul>\r\n \t<li><code>vw<\/code> \u2013 1% vaateava laiusest (<em>viewport width<\/em>);<\/li>\r\n \t<li><code>vh<\/code> \u2013 1% vaateava k\u00f5rgusest (<em>viewport height<\/em>);<\/li>\r\n \t<li><code>vmin<\/code> \u2013 1% vaateava l\u00fchemast servast (<em>viewport minimum<\/em>), kas laiusest v\u00f5i k\u00f5rgusest olenevalt kumb on l\u00fchem;<\/li>\r\n \t<li><code>vmax<\/code> \u2013 1% vaateava pikemast servast (<em>viewport maximum<\/em>), kas laiusest v\u00f5i k\u00f5rgusest olenevalt kumb on pikem.<\/li>\r\n<\/ul>\r\nNendega saab m\u00e4\u00e4rata veebilehe elementide m\u00f5\u00f5te. N\u00e4iteks m\u00e4\u00e4rame teksti suuruseks 2vw, ehk 2% vaateava laiusest:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p style=\"font-size:10vw;\"&gt;See tekst muudab suurust.&lt;\/p&gt;<\/pre>\r\nMuuda brauseriakna suurust ning n\u00e4ed kuidas alloleva teksti suurus muutub.\r\n<p style=\"font-size: 2vw;\">See tekst muudab suurust.<\/p>\r\nKui kasutame brauseris suumimise v\u00f5imalust, siis vaateava laiuse p\u00f5hjal m\u00e4\u00e4ratud teksti suurus ei muutu!\r\n<iframe src=\"https:\/\/www.youtube.com\/embed\/vZH9ZKg0lBk?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>\r\n<h1>Erinev pilt olenevalt ekraani suurusest (brauseri laiusest)<\/h1>\r\nKohanduva veebi (<em>responsive web<\/em>) jaoks pakub HTML elementi <code>&lt;picture&gt;<\/code>, mis laseb \u00fche l\u00e4htefaili asemel m\u00e4\u00e4rata mitu. Seega saame veebilehe k\u00fclastajale kuvada pilti, mis sobib k\u00f5ige paremini just tema seadmele v\u00f5i ekraanisuurusele.\r\n\r\nElemendil <code>&lt;picture&gt;<\/code> on kahte t\u00fc\u00fcpi t\u00fctarelemente: <code>&lt;source&gt;<\/code> ja <code>&lt;img&gt;<\/code>.\r\n\r\nT\u00fctarelement <code>&lt;source&gt;<\/code> m\u00e4\u00e4rab mingisugusele seadmele\/ekraanisuurusele vastava pildifaili. Neid elemente v\u00f5ib olla mitu. <code>&lt;source&gt;<\/code> kasutatakse enamasti kahte j\u00e4rgnevat atribuuti:\r\n<ul>\r\n \t<li><code>srcset<\/code> \u2013 m\u00e4\u00e4rab pildifaili URL-i (kohustuslik atribuut);<\/li>\r\n \t<li><code>media<\/code> - m\u00e4\u00e4ratleb meedia\/v\u00e4ljundseadme, mille jaoks vastav pilt m\u00f5eldud on.<\/li>\r\n<\/ul>\r\nBrauser valib esimese sobiva pildifaili ning ignoreerib \u00fclej\u00e4\u00e4nuid.\r\n\r\nTeise t\u00fctarelemendi t\u00fc\u00fcbina on <code>&lt;img&gt;,<\/code> mis peab olema viimane (ainult \u00fcks), et tagada \u00fchilduvus brauseritega, mis ei toeta <code>&lt;picture&gt;<\/code> elementi. <code>&lt;img&gt;<\/code> elementi kasutatakse ka, kui \u00fckski <code>&lt;source&gt;<\/code> element pole sobiv.\r\n\r\n<span class=\"nb\">NB! T\u00fctarelement <code>&lt;img&gt;<\/code> peab olema viimane!<\/span>\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;picture&gt;\r\n  &lt;source media=\"(max-width: 400px)\" srcset=\"tilluke_pilt.jpg\"&gt;\r\n  &lt;source media=\"(max-width: 800px)\" srcset=\"keskmine_pilt.jpg\"&gt;\r\n  &lt;source srcet=\"suur_pilt.jpg\"&gt;\r\n  &lt;img src=\"keskmine_pilt.jpg\" alt=\"N\u00e4idispilt\" style=\"width:auto;\" &gt;\r\n&lt;\/picture&gt;<\/pre>\r\n<span class=\"nb\">NB! Meediap\u00e4ring peab olema sulgudes!<\/span>\r\n<iframe src=\"https:\/\/www.youtube.com\/embed\/XgJz118ILeY?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>","rendered":"<p>Kohanduva kujunduse eesm\u00e4rk on, et meie loodav veebileht n\u00e4eks hea v\u00e4lja igas suuruses ekraanidel ja erinevatel seadmetel.<\/p>\n<h1>Vaateava (<em>viewport<\/em>)<\/h1>\n<p>Vaateava ehk<em> viewport<\/em> v\u00f5imaldab disaineritel luua kohanduvat (<em>responsive<\/em>) kujundust vastavalt veebilehe vaatamiseks kasutatava seadme ekraani suurusele. Vaateava annab brauserile juhised, kuidas veebilehe m\u00f5\u00f5tusid hallata, elemente suurendada\/v\u00e4hendada.<\/p>\n<p>Vaateava defineeritakse j\u00e4rgmise meta-elemendiga veebilehe p\u00e4ises:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/pre>\n<p>Atribuudi content v\u00e4\u00e4rtuse sisuks on omakorda vaateava atribuudid:<\/p>\n<ul>\n<li><code>width=device-width<\/code> \u2013 k\u00e4sib lehe suuruse seada vastavusse kasutatava seadme ekraaniga;<\/li>\n<li><code>initial-scale=1.0<\/code> \u2013 m\u00e4\u00e4rab lehe laadimisel kasutatava esialgse suurendusastme (<em>zoom level<\/em>).<\/li>\n<\/ul>\n<p>Atribuutidel v\u00f5ib olla ka teistsuguseid v\u00e4\u00e4rtuseid.<\/p>\n<ul>\n<li><code>width<\/code> v\u00e4\u00e4rtuseks v\u00f5ib olla ka konkreetne arv piksleid, n\u00e4iteks <code>width=640<\/code>. Seda kasutatakse, kui on teada, et leht vajab minimaalselt teatavat laiust aga m\u00f5nel seadmel v\u00f5ib olla sellest v\u00e4iksem ekraan.<\/li>\n<\/ul>\n<p>Olemas on veel atribuudid:<\/p>\n<ul>\n<li><code>height<\/code> \u2013 mis on kasulik, kui elementide asukoht muutub vastavalt vaateava k\u00f5rgusele. \u00dcks v\u00f5imalikke v\u00e4\u00e4rtuseid on <code>device-height<\/code>.<\/li>\n<li><code>maximum-scale<\/code> \u2013 m\u00e4\u00e4rab maksimaalse v\u00f5imaliku suurendusastme, v\u00e4\u00e4rtuste vahemik on &gt; 0 kuni 10 ja vaikev\u00e4\u00e4rtuseks 5;<\/li>\n<li><code>minimum-scale<\/code> \u2013 m\u00e4\u00e4rab minimaalse v\u00f5imaliku suurendusastme, v\u00e4\u00e4rtuste vahemik on &gt; 0 kuni 10 ja vaikev\u00e4\u00e4rtuseks 0,25;<\/li>\n<li><code>user-scalable<\/code> \u2013 m\u00e4\u00e4rab, kas kasutaja saab suurendusastet muuta, v\u00e4\u00e4rtusteks \u201eyes\u201c (vaikev\u00e4\u00e4rtus) ja \u201eno\u201c.<\/li>\n<\/ul>\n<p>N\u00e4iteks v\u00f5ib olla soov luua kindla suurusega veebirakendust, mille suurust muuta ei saa:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;meta name=\"viewport\" content=\"user-scalable=no,width=device-width\"&gt;<\/pre>\n<p>P\u00e4rast vaateava kasutuselev\u00f5ttu saame kasutada j\u00e4rgmiseid m\u00f5\u00f5t\u00fchikuid, mille abil muuta elementide paigutust ja suurust:<\/p>\n<ul>\n<li><code>vw<\/code> \u2013 1% vaateava laiusest (<em>viewport width<\/em>);<\/li>\n<li><code>vh<\/code> \u2013 1% vaateava k\u00f5rgusest (<em>viewport height<\/em>);<\/li>\n<li><code>vmin<\/code> \u2013 1% vaateava l\u00fchemast servast (<em>viewport minimum<\/em>), kas laiusest v\u00f5i k\u00f5rgusest olenevalt kumb on l\u00fchem;<\/li>\n<li><code>vmax<\/code> \u2013 1% vaateava pikemast servast (<em>viewport maximum<\/em>), kas laiusest v\u00f5i k\u00f5rgusest olenevalt kumb on pikem.<\/li>\n<\/ul>\n<p>Nendega saab m\u00e4\u00e4rata veebilehe elementide m\u00f5\u00f5te. N\u00e4iteks m\u00e4\u00e4rame teksti suuruseks 2vw, ehk 2% vaateava laiusest:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p style=\"font-size:10vw;\"&gt;See tekst muudab suurust.&lt;\/p&gt;<\/pre>\n<p>Muuda brauseriakna suurust ning n\u00e4ed kuidas alloleva teksti suurus muutub.<\/p>\n<p style=\"font-size: 2vw;\">See tekst muudab suurust.<\/p>\n<p>Kui kasutame brauseris suumimise v\u00f5imalust, siis vaateava laiuse p\u00f5hjal m\u00e4\u00e4ratud teksti suurus ei muutu!<br \/>\n<iframe src=\"https:\/\/www.youtube.com\/embed\/vZH9ZKg0lBk?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h1>Erinev pilt olenevalt ekraani suurusest (brauseri laiusest)<\/h1>\n<p>Kohanduva veebi (<em>responsive web<\/em>) jaoks pakub HTML elementi <code>&lt;picture&gt;<\/code>, mis laseb \u00fche l\u00e4htefaili asemel m\u00e4\u00e4rata mitu. Seega saame veebilehe k\u00fclastajale kuvada pilti, mis sobib k\u00f5ige paremini just tema seadmele v\u00f5i ekraanisuurusele.<\/p>\n<p>Elemendil <code>&lt;picture&gt;<\/code> on kahte t\u00fc\u00fcpi t\u00fctarelemente: <code>&lt;source&gt;<\/code> ja <code>&lt;img&gt;<\/code>.<\/p>\n<p>T\u00fctarelement <code>&lt;source&gt;<\/code> m\u00e4\u00e4rab mingisugusele seadmele\/ekraanisuurusele vastava pildifaili. Neid elemente v\u00f5ib olla mitu. <code>&lt;source&gt;<\/code> kasutatakse enamasti kahte j\u00e4rgnevat atribuuti:<\/p>\n<ul>\n<li><code>srcset<\/code> \u2013 m\u00e4\u00e4rab pildifaili URL-i (kohustuslik atribuut);<\/li>\n<li><code>media<\/code> &#8211; m\u00e4\u00e4ratleb meedia\/v\u00e4ljundseadme, mille jaoks vastav pilt m\u00f5eldud on.<\/li>\n<\/ul>\n<p>Brauser valib esimese sobiva pildifaili ning ignoreerib \u00fclej\u00e4\u00e4nuid.<\/p>\n<p>Teise t\u00fctarelemendi t\u00fc\u00fcbina on <code>&lt;img&gt;,<\/code> mis peab olema viimane (ainult \u00fcks), et tagada \u00fchilduvus brauseritega, mis ei toeta <code>&lt;picture&gt;<\/code> elementi. <code>&lt;img&gt;<\/code> elementi kasutatakse ka, kui \u00fckski <code>&lt;source&gt;<\/code> element pole sobiv.<\/p>\n<p><span class=\"nb\">NB! T\u00fctarelement <code>&lt;img&gt;<\/code> peab olema viimane!<\/span><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;picture&gt;\r\n  &lt;source media=\"(max-width: 400px)\" srcset=\"tilluke_pilt.jpg\"&gt;\r\n  &lt;source media=\"(max-width: 800px)\" srcset=\"keskmine_pilt.jpg\"&gt;\r\n  &lt;source srcet=\"suur_pilt.jpg\"&gt;\r\n  &lt;img src=\"keskmine_pilt.jpg\" alt=\"N\u00e4idispilt\" style=\"width:auto;\" &gt;\r\n&lt;\/picture&gt;<\/pre>\n<p><span class=\"nb\">NB! Meediap\u00e4ring peab olema sulgudes!<\/span><br \/>\n<iframe src=\"https:\/\/www.youtube.com\/embed\/XgJz118ILeY?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n","protected":false},"author":1,"menu_order":22,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":25,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/772"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":10,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/772\/revisions"}],"predecessor-version":[{"id":826,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/772\/revisions\/826"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/25"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/772\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=772"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=772"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=772"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}