{"id":1183,"date":"2026-02-26T11:21:42","date_gmt":"2026-02-26T09:21:42","guid":{"rendered":"https:\/\/illiablahun24.thkit.ee\/wp\/?page_id=1183"},"modified":"2026-02-26T13:29:20","modified_gmt":"2026-02-26T11:29:20","slug":"web-design","status":"publish","type":"page","link":"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/","title":{"rendered":"Web Design"},"content":{"rendered":"\n

Responsive disain <\/strong>on see, kui veebileht kohandub ekraani laiuse ja k\u00f5rgusega, ehk see s\u00f5ltub nendest. T\u00e4nu sellele on seda oluliselt lihtsam hooldada kui adaptive-disaini.<\/p>\n\n\n\n

Adaptive disain <\/strong>t\u00e4hendab, et veebilehel on eraldi versioonid erinevate seadmete jaoks \u2013 t\u00e4psemalt \u00f6eldes luuakse eraldi maketid telefoni, tahvelarvuti ja arvuti jaoks. Seda on keerulisem hooldada.<\/p>\n\n\n\n

Allpool n\u00e4itan tabelit nende erinevuste ning nende plusside ja miinustega.<\/p>\n\n\n\n

Responsive disain<\/strong><\/th>Adaptive disain<\/strong><\/th><\/tr><\/thead>
\u00dcks paindlik makett<\/td>Mitu eraldi maketti<\/td><\/tr>
Kohandub sujuvalt ekraani laiuse ja k\u00f5rgusega<\/td>Laeb kindla maketi vastavalt seadmele<\/td><\/tr>
Kasutab CSS media queries ja paindlikke grid-s\u00fcsteeme<\/td>P\u00f5hineb kindlatel ekraanisuurustel (nt telefon, tahvel, arvuti)<\/td><\/tr>
Lihtsam hooldada<\/td>Keerulisem hooldada<\/td><\/tr>
Sobib h\u00e4sti uutele ja erineva suurusega seadmetele<\/td>V\u00f5imaldab t\u00e4psemat kontrolli iga seadme \u00fcle<\/td><\/tr>
V\u00f5ib laadida m\u00f5nikord rohkem ressursse kui vaja<\/td>Saab optimeerida iga seadme jaoks eraldi<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Responsive disain<\/p>\n\n\n

\n.container {\n  display: flex;\n}\n\n@media (max-width: 600px) {\n  .container {\n    flex-direction: column;\n  }\n}\n<\/pre><\/div>\n\n\n
Adaptive disain<\/p>\n\n\n
\n\/* Desktop *\/\n@media (min-width: 1024px) {\n  body { background: lightblue; }\n}\n\n\/* Telefon *\/\n@media (max-width: 600px) {\n  body { background: lightgreen; }\n}\n<\/pre><\/div>\n\n\n
\u00dclal oli n\u00e4idatud nende kahe disaini koodi erinevus.<\/p>\n\n\n\n
Minu arvates on nii Responsive disain kui ka Adaptive disain omal moel head. Siin tuleb arvestada, mida sul t\u00e4pselt vaja on.<\/p>\n\n\n\n
Kui oluline on veebilehe kiirus, siis v\u00f5ib Adaptive disain olla parem valik, sest seda saab t\u00e4psemalt kohandada iga seadme jaoks eraldi. Kui see ei ole nii oluline, siis on lihtsam kasutada Responsive disaini.<\/p>\n\n\n\n
Minu puhul on parem teine variant.<\/p>\n\n\n
\n@media (max-width: 900px) {\n    nav ul { flex-direction: column; }\n    nav ul li { width: 100%; }\n    .nav-link { border-right: none; border-bottom: 1px solid white; text-align: center; }\n}\n<\/pre><\/div>\n\n\n
Navigeerimine muutub v\u00e4ikestel ekraanidel vertikaalseks<\/strong><\/p>\n\n\n\n
Selgitus:<\/p>\n\n\n\n
    \n
  • Men\u00fc\u00fcrida muutub horisontaalsest vertikaalseks<\/li>\n\n\n\n
  • Lingid venivad kogu ekraani laiusele<\/li>\n\n\n\n
  • Seda lahendust kasutasime meie index.html<\/strong> lehel<\/li>\n<\/ul>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Samuti on \u00fcleval ekraanipildid erinevatest seadmetest, mis n\u00e4itavad, kuidas leht kohandub telefonis, tahvelarvutis ja arvutis.<\/p>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    Responsive disain on see, kui veebileht kohandub ekraani laiuse ja k\u00f5rgusega, ehk see s\u00f5ltub nendest. T\u00e4nu sellele on seda oluliselt lihtsam hooldada kui adaptive-disaini. Adaptive disain t\u00e4hendab, et veebilehel on eraldi versioonid erinevate seadmete jaoks \u2013 t\u00e4psemalt \u00f6eldes luuakse eraldi maketid telefoni, tahvelarvuti ja arvuti jaoks. Seda on keerulisem hooldada. Allpool n\u00e4itan tabelit nende erinevuste […]<\/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-1183","page","type-page","status-publish","hentry"],"yoast_head":"\nWeb Design - Illia Blahun portfoolio<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/\" \/>\n<meta property=\"og:locale\" content=\"et_EE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Design - Illia Blahun portfoolio\" \/>\n<meta property=\"og:description\" content=\"Responsive disain on see, kui veebileht kohandub ekraani laiuse ja k\u00f5rgusega, ehk see s\u00f5ltub nendest. T\u00e4nu sellele on seda oluliselt lihtsam hooldada kui adaptive-disaini. Adaptive disain t\u00e4hendab, et veebilehel on eraldi versioonid erinevate seadmete jaoks \u2013 t\u00e4psemalt \u00f6eldes luuakse eraldi maketid telefoni, tahvelarvuti ja arvuti jaoks. Seda on keerulisem hooldada. Allpool n\u00e4itan tabelit nende erinevuste […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Illia Blahun portfoolio\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T11:29:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/illiablahun24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/9A529AE1-42A8-4E69-8A6B-7A1E24EE4471-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"736\" \/>\n\t<meta property=\"og:image:height\" content=\"803\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/web-design\\\/\",\"url\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/web-design\\\/\",\"name\":\"Web Design - Illia Blahun portfoolio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/web-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/web-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/9A529AE1-42A8-4E69-8A6B-7A1E24EE4471-1.png\",\"datePublished\":\"2026-02-26T09:21:42+00:00\",\"dateModified\":\"2026-02-26T11:29:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/web-design\\\/#breadcrumb\"},\"inLanguage\":\"et\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/web-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/web-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/9A529AE1-42A8-4E69-8A6B-7A1E24EE4471-1.png\",\"contentUrl\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/9A529AE1-42A8-4E69-8A6B-7A1E24EE4471-1.png\",\"width\":736,\"height\":803},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/web-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/\",\"name\":\"Illia Blahun portfoolio\",\"description\":\"Noorem tarvaarendaja\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"et\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Design - Illia Blahun portfoolio","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/","og_locale":"et_EE","og_type":"article","og_title":"Web Design - Illia Blahun portfoolio","og_description":"Responsive disain on see, kui veebileht kohandub ekraani laiuse ja k\u00f5rgusega, ehk see s\u00f5ltub nendest. T\u00e4nu sellele on seda oluliselt lihtsam hooldada kui adaptive-disaini. Adaptive disain t\u00e4hendab, et veebilehel on eraldi versioonid erinevate seadmete jaoks \u2013 t\u00e4psemalt \u00f6eldes luuakse eraldi maketid telefoni, tahvelarvuti ja arvuti jaoks. Seda on keerulisem hooldada. Allpool n\u00e4itan tabelit nende erinevuste […]","og_url":"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/","og_site_name":"Illia Blahun portfoolio","article_modified_time":"2026-02-26T11:29:20+00:00","og_image":[{"width":736,"height":803,"url":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/9A529AE1-42A8-4E69-8A6B-7A1E24EE4471-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/","url":"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/","name":"Web Design - Illia Blahun portfoolio","isPartOf":{"@id":"https:\/\/illiablahun24.thkit.ee\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/#primaryimage"},"image":{"@id":"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/9A529AE1-42A8-4E69-8A6B-7A1E24EE4471-1.png","datePublished":"2026-02-26T09:21:42+00:00","dateModified":"2026-02-26T11:29:20+00:00","breadcrumb":{"@id":"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/#breadcrumb"},"inLanguage":"et","potentialAction":[{"@type":"ReadAction","target":["https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/"]}]},{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/#primaryimage","url":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/9A529AE1-42A8-4E69-8A6B-7A1E24EE4471-1.png","contentUrl":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/9A529AE1-42A8-4E69-8A6B-7A1E24EE4471-1.png","width":736,"height":803},{"@type":"BreadcrumbList","@id":"https:\/\/illiablahun24.thkit.ee\/wp\/web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/illiablahun24.thkit.ee\/wp\/"},{"@type":"ListItem","position":2,"name":"Web Design"}]},{"@type":"WebSite","@id":"https:\/\/illiablahun24.thkit.ee\/wp\/#website","url":"https:\/\/illiablahun24.thkit.ee\/wp\/","name":"Illia Blahun portfoolio","description":"Noorem tarvaarendaja","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/illiablahun24.thkit.ee\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"et"}]}},"_links":{"self":[{"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/1183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/comments?post=1183"}],"version-history":[{"count":6,"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/1183\/revisions"}],"predecessor-version":[{"id":1200,"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/1183\/revisions\/1200"}],"wp:attachment":[{"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/media?parent=1183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}