{"id":232235,"date":"2023-01-24T17:54:00","date_gmt":"2023-01-24T14:54:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232235"},"modified":"2022-11-10T08:13:43","modified_gmt":"2022-11-10T05:13:43","slug":"reageeriva-css-i-disaini-oppimine-1","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/reageeriva-css-i-disaini-oppimine-1\/","title":{"rendered":"Reageeriva CSS-i disaini \u00f5ppimine \u2013 1"},"content":{"rendered":"

Programmeerijatele ei meeldi GUI (graafiline kasutajaliides) disain. Seet\u00f5ttu pole CSS (Cascade Style Sheet) nende asi. Teadsin alati, et nutitelefonides\/seadmetes, kus ekraani (brauseri) laius on v\u00e4ike ja kitsas, on vaatamisega probleeme. See blogi oli enne minu Samsung Gallery S3 nutitelefoniga vaatamist t\u00e4ielikus segaduses.<\/p>\n

Seda seet\u00f5ttu, et valisin malli, mis sobib k\u00f5ige paremini laiema ekraaniga lauaarvutite jaoks. Mul ei olnud aega ega tahtnud seda muuta enne, kui n\u00e4gin Google Analyticus k\u00fclastusstatistikat. Ilmselt kasvab see arv m\u00e4rkimisv\u00e4\u00e4rselt nutitelefonidest\/seadmetest p\u00e4rit k\u00fclastajate osas.<\/p>\n

WordPress v\u00f5i v\u00f5ib-olla teema uuendamine paranes palju. Kui n\u00fc\u00fcd nutitelefonide simuleerimiseks brauseri laiust kitsendada, n\u00e4ete, et leht pole p\u00e4ris halb, kuid pole ka t\u00e4iuslik ja n\u00f5uab k\u00e4sitsi reguleerimist.<\/p>\n

Niisiis, mis on tundlik CSS? S\u00f5na reageeriv t\u00e4hendab, et minu arvates kohandatakse CSS-i vastavalt erinevatele olukordadele (nt ekraani laius). Kas olete m\u00e4rganud, et selle lehe vasakus \u00fclanurgas on vertikaalne t\u00f6\u00f6riistariba. See n\u00e4eb hea v\u00e4lja laiemas laiuses, kuid kitsas laiuses vajub see p\u00f5hisisuga kokku ja muudab selle kasutajakogemuse t\u00f5eliselt koledaks. Otsustan selle peita, kui ekraani laius on v\u00e4ike.<\/p>\n

Nii et j\u00e4rgmine on kiire l\u00e4htepunkt tundlikule CSS-ile.<\/p>\n

<style>\n.topleft { position:fixed;left:5px;top:15px; }\n@media(max-width: 1100px) { .topleft { display:none } }\n<\/style><\/code><\/pre>\n
P\u00f5him\u00f5tteliselt m\u00e4\u00e4ratleb \u00fclaltoodud CSS klassi<\/strong> \u00fclaosa ja teine \u200b\u200brida kontrollib, kas praeguse lehe (brauser, ekraan) laius on suurem kui 1100 pikslit, kui mitte, siis m\u00e4\u00e4ratletakse \u00fclaosa uuesti peidetuks.<\/p>\n
Selle kasutamiseks lisage see lihtsalt nii\u2026<\/p>\n
<div class='topleft'>\n  <!-- top-left icons placed here for <\/code><\/pre>\n
N\u00fc\u00fcd ei pea te isegi lehte v\u00e4rskendama, CSS reageerib kohe, kui ekraani laius langeb alla 1100 piksli. N\u00e4iteks kui vaatate iPadis ja p\u00f6\u00f6rate horisontaalselt vertikaalselt 90 kraadi, reageerib CSS-kood ja ikoonid peidetakse.<\/p>\n
:  helloacm.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Responsive CSS-disaini \u00f5ppimine \u2013 1<\/p>\n","protected":false},"author":1,"featured_media":224559,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[718,905,894,842,863],"tags":[1165],"class_list":["post-232235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-css-4","category-kood","category-opetused","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/232235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=232235"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/232235\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224559"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=232235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=232235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=232235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}