Tapio-Huuhaa

Vapaa kuvaus

Harrastuksena www-suunnittelu, ristikoiden ratkonta ja kuntoliikunta. Digipiirtämistäkin pitäisi ehtiä harrastamaan, mutta se on jäänyt.

Aloituksia

267

Kommenttia

7703

  1. Sain+800×1280+Google+Chrome+-selaimelle+sopivat+arvot,+mutta+mitenkähän+muut+selaimet+niihin+suhtautuvat?Sivun+alaosan+kohdalla+meni+kokeilemiseksi.+1280-suuntaan+on+pienemmät+arvot+kuin+800-suuntaan.Tietokoneen+näytöllä+tablet-laitteelle+sopivan+kokoinen+fontti+on+tietokoneella+hirveän+pientä.Niin+em,+rem+kuin+vw-arvoilla+työskentely+aiheuttaa+ennalta+arvaamatonta+fonttikokojen+vaihteluita.Pikseliarvoilla+määrittely+on+monin+verroin+helpompaa.+Silloin+tietää,+mikä+on+lopputulos+eikä+sitä+joudu+arvailemaan+ja+kokeilemaan+järjettömän+paljon.
  2. No+vw-arvoilla+sain+fonttikoon+oikeaksi:/*+rem-arvo+ei+toimi,+yritin+korvata+pikseliarvoilla+,+mutta+ei+toimi+*/@media+screen+and+(min-width:783px)+and+(max-width:800px)+{ body.single-post+#main-content+div.entry-content+p, body.single-post+#main-content++div.entry-content+li, body.page+#main-content++div.entry-content+p, body.page+#main-content++div.entry-content+li, body.bbpress+#main-content++.bbp-reply-content+p, body.bbpress+#main-content++.bbp-reply-content+li+{ font-size:1.35vw+!important; }}Rem-arvot+eivät+pitäneet+lupaustaan+ts.+että+rem-arvoilla+fonttikoot+saisi+luotettavasti+määriteltyä+suhteessa+BODY-elementtiin.Täytyy+muuttaa+vw-arvoiksi+ne+arvot,+jotka+eivät+toimi+rem-arvoina.
  3. En+nyt+oikein+pysty+ymmärtämään,++miten+selain+voisi+tunnistaa+laitteen+fyysisen+selainikkunan+koon.+Jos+tuo+vw+suhteutuu+pikselimäärään,+se+voisi+olla+toimiva.+Se+saattaisi+paremmin+suhteutua+näyttöporttiin+kuin+rem.+Rem+pitäisi+suhteutua+näyttöportiin,+koska+juurielementille+(BODY)+on+fonttikoko.+Mutta+on+todella+outoa,+että+rem+ei++toiminut+800x1280px+tablet-laitteessani.+Se+toimi+vaakasuuntaisella+näytöllä+ok+lukuun+ottamatta+footer-osioita.+Pystysuunnassa+ei+perustekstin+suhteen+ollenkaan.++Miksi+toimi+toiseen+suuntaan,+en+voi+käsittää.+800+ja+1280+suuntiin+on+sama+fonttikokomääritys.https://www.sanaristikkofoorumi.net/wordpress/forums/topic/foorumin-fonttikoon-toimivuus/ehkä+parempi+paikka+keskustella+juuri+minun+ongelmastaniHEAD-osasta+näkee+uudelleenmäärittelyt
  4. Osa+fonttikoista+on+rem-arvoilla+ylikokoisia.+En+ymmärrä+miksi.
  5. Bodylle+laitoin+body+{ font-size:medium; }Tämä+tarpeen,+jotta+BODY:lle+annettu+pikseliarvoinen+fonttikoko+voidaan+ohittaa.Kännykkää+ajatellen+HD-laitteille+perusfontteja+on+isonnettu.Myös+iPad+&+2K+pystysuunnassa+omat+fonttikoot.Muuten+perusfonttikoko+on+1.0rem.+Otsikot+tuota+suurempia+ja+listauksiin+ja+painikkeisiin+liittyvät+fonttikoot+pienempiä.Sivujen+pitäisi+skaalautua+nätisti+320-1668px+alueella+kun+laitetta+pidetään+pystysuuntaisesti.Vaakasuunnassa+ei+kaikilla+laitteilla+toimi.
  6. Epäien,+että+toisille+näyttökoolle+fontti+on+turhan+pientä+tai+turhan+isoa.+Tavoitteeni+on+saada+järkevän+kokoista+fonttia+suhteessa+laitteen+fyysiseen+kokoon.Eihän+se+tietenkään+täysin+onnistu,+sillä+Full+HD+kännykkä+ja+Full+HD+läppäri/tablet-laite+näyttävät+fontin+eri+kokoisina.+Full+HD:n+kuitenkin+haluan+määrittää+kännykän+mukaan.On+pakko+pienentää+fontteja+listoissa,+koska+listoissa+on+paljon+tietoa.Tieto++on+listaelementteinä.+Ainoa+mahdollisuus+kunnolla+hallita+lstaelementtien+WordPress+fontteja+on+joko+käytää+px-+tai+rem-arvoja.Em+on+kaikkialla+huono,+sillä+se+aiheutta+aina+ongelma+listaelementeille,+jos+listoisssa+käytetään+muuta+kuin+arvoa+1.0em.Em-arvot+ovat+yleiselläkin+tasolla+WordPress+leiskoissa++käyttökelvottomia,+koska+elementtikerroksia+on+todella+paljon.++On+ihan+mahdotonta+pitää+kirjaa+siitä,+mikä+on+minkäkin+elementin+emoelementti.+Lähtökohtaisestikin+leiskoissa+on+em-fonttimääritysten+takia+jonkin+verran+holtitonta+fonttikoon+heittelyä+sivun+footer-osiossa.Minun+täytyy+elää+niiden+mallinteiden+mukaan,+mitä+on+käytettävissä.+Kävin+läpi+kaikki+css-tiedostot+ja+koostin+niistä+fonttikokomäärityslistat.+Kokeilen+lähiaikoina+em-arvoisia+fonttikokoja+täydennettynä+BODY-elementille+annetulla+peruskoolla.Mitähän+sille+BODY-elementille+laittaisi.
  7. Em-fonttikoot+on+mielestäni+kaikkein+huonoin+mahdollinen+tapa.+Fonttikoot+karkaavat+täysin+lapasesta.+Kokeilin+-+ei+toimi+ollenkaan.+1.1em+aiheutti+järkyttävän+suurta+fonttia,+Syy+siihen,+että+fonttikoko+karkasi+täysin+lapasesta+löytyy+tästä:"em+units+are+relative+to+their+parent+container+so+nested+lists+have+decreasing+font+sizes.+It+can+be+difficult+to+determine+font+sizes+on+complex+pages+—+most+of+us+use+the+force+(lots+of+trial+and+error).rem+is+similar+to+em+except+that+it’s+relative+to+the+root+element+rather+than+the+parent.+Changing+the+li+selector+to+0.75rem+will+ensure+all+nested+lists+remain+at+12px.rem+is+available+in+Chrome,+Firefox,+Safari,+Opera+and+IE9+.+"Ongelma+ei+koske+vain+listoja+vaan+ylipäätänsä+monikerroksellisuutta.+rem-arvot+on+ainut+tapa,+jolla+leiskakoko+on+sekä+suunnittelija+että+käyttäjän+kannalta+hallinnassa.+Em-arvojen+sijaan+kannattaa+suositella+rem-arvoja.+Riittää+että+BODY-elementille+antaa+arvon.
  8. Jotenkin+tulee+epävarma+olo+noiden+em-arvojen+kanssa,+joten+en+taida+niihin+mennä.+Ehkä+tuntemattomille+laitteille+voisi+ne+määritellä.Alla+määrittely+HD-laitteille: textarea.wp-editor-area, .site-info+a.privacy-policy-link:link, .site-info+a.privacy-policy-link:visited, .site-info+a.imprint:link, .site-info+a.imprint:visited, ul#primary-menu+a:link, ul#primary-menu+a:visited, .bbp-reply-content+p, .bbp-reply-content+blockquote, .bbp-reply-content+li, #colophon+.widget, #colophon+.widget+*, body.single-post+.entry-content, body.page+.entry-content, body.search+.entry-content, .content-sidebar+*, .content-sidebar+a:link, .content-sidebar+a:visited, body.bbpress+ul.bbp-topics+*, body.bbpress+div.bbp-topic-form+form#new-post+fieldset.bbp-form+textarea.bbp-the-content+{ font-size:16px+!important; } body.bbpress+#bbpress-forums+*, body.bbpress+div.bbp-reply-form+form#new-post+fieldset.bbp-form+p+label, body.bbpress+div.bbp-reply-form+form#new-post+fieldset.bbp-form+legend, body.bbpress+div.bbp-topic-form+form#new-post+fieldset.bbp-form+p+label, body.bbpress+div.bbp-topic-form+form#new-post+fieldset.bbp-form+legend+{ font-size:15px+!important; } #colophon+.widget+#bottom-forum-list+span.sub+a, body.bbpress+li.bbp-header+*, body.bbpress+li.bbp-body+*+{ font-size:14px+!important; }Ehdotuksia+iPadille+ja+2K+laitteille+vaakasuuntaan.
  9. @media+screen+and+(min-widht...)@media+screen+and+(+(max-widht...)@media+screen+and+(+(max-widht...)idea+on+siinä,+että+näytön+pinta-ala+hyödynnetään+järkevästi.+Jos+ajatellaan+tätä+sivustoa+ja+omaa+foorumisivustoani+isoresuluutioisessa+näytössä++on+hirvittävästi+tyhjää+tilaa.+2K+näytöllä+pystysuunnassa+tyhjää+tilaa+ei+jää+hirveästi.+Ihan+siedettävä+lopputulos.2K+näytöllä+vaakasuunnassa+niin+tällä+sivustolla+kuin+omalla+foorumilla+noin+puolet+näytön+pinta-alasta+jää+käyttämättä.++Olisi+ihan+kiva+suunnittella+sivut+näinkin+päin+järkevää+tilankäyttöä+ajatellen.En+tunne+iPad+laitteita,+mutta+ainakin+Android-selain+toimii+koko+ikkunassa.+Hukkatilaa+ei+voi+hyödyntää+laittamalla+rinnalle+toisen+ohjelman+kuten+voi+ainakin+Windows-laitteissa+ja+ymmärtääkseni+myös+Chrome+OS+-laitteissa+sille+suunnitelluilla+ohjelmilla+(Android-ohjelmat+käyttävät+kokoikkunaa).
  10. Voit+hyvinkin+olla+oikeassa+tuossa+fonttikoossa.@media+screen+and+(min-width:)+ja+max-width+kuuluvat+WordPress+leiskojen+olemukseen.+Niillä+hallitaan+sitä,+onko+esillä+kerrallan+yksi,+kaksi+vai+kolme+palstaa.+Toimii+ihan+hyvin,+mutta+onhan+niitten+kanssa+näpertelemistä.++Kyse+on+siis+PERUSTAVALAATUISESTA+toimintatavasta,+ei+mistään+pikkunäpertelystä.Position+absolute+ja+fixed+sopii+navigaatioon.+Minusta+on+kiva,+kun+navigaatio+on+aina+käytettävissä.En+muuttanut+alkuperäistä+CSS:ää+paitsi+lisäsin+loppuun+väripaletin.+Näin+leiska+hallinnassa.Omasta+CSS:stä+tuli+iso,+koska+pohjana+vaikutti+koko+ajan+teeman+laatijan+CSS,+jota+tuli+yrittää+hallitusti+muuttaa.Monet+arvot+on+prosentuaalisia+ja+float:left+käytössäOsassa+max-width+ja+min-width+myös,+että+saa+käytettyä+tarkasti+näytön+pinta-alan.
  11. Tarkoitin+tuolla+siis+kohdista,+jotka+liittyvät+sivustoni+yksityiskohtiin.Mitä+tälle+sivustolle+kaipaisin++on+linkkeä+sivun+ylä-+ja+alalaitaan.+Olisi+aika+helppo+toteuttaa.Jonkin+tason+editori+olisi+kiva.+Sain+sivustolleni+graafisenkin+editorin,+mutta+piti+lisätä+funktio+lähdekoodiin.+Jostakin+ihme+syystä+graafisen+editorin+mahdollistavaa+funktiota+ei+teemassa+ollut+valmiina.
  12. Jos+keskusteltavaa+vielä,+kannattaa+keskustella+foorumisivustollani.
  13. Sain+otsikkokuvan+määriteltyä+joka+leveysarvolle+suht.+mielekkään+kokoiseksi.++Otsinkon+marginaalit+sain+siedettäviksi.+Muutkin+marginaalit+pitäisi+toimia+näytönleveyksittäin+suht.+ok.+Ei+kannata+enempää+hioa.
  14. On+näiden+nykyleiskojen+kanssa+pirummoinen+työ.+Body-luokkia+tosi+paljon.+Yksi+luokka+on+jäänyt+huomioimatta+kun+lisäsin+uuden+tyyppisiä+sivuja.Toimii+tällä+hetkellä+nätimmin+HD-laitteilla+(ainakin+tietokonenäytön+perusteella).
  15. Etusivulla+otsikko+on+kiva+olla+kuvan+päällä.+Määritin+z-index:0.+Muualla+en+siitä+pidä.
  16. Turbo-Urpolle.Laitoin+vasta+eilen+etusivulle+tuon.++Hyvä+huomio."@media+screen+and+(min-width:+673px).slider+.featured-content+.entry-header+{"+En+ole+jaksanut+lukea+läpi+mitä+kaikkea+erikoista+teeman+CSS+sisältää.+Olen+yrittänyt+omalla+CSS:llä+vain+korjata+epäkohtia.+Ärsyttää+jonkin+verran+se,+että+joissakin+tilanteissa+sisältö+tuli+otsikkokuvan+päälle+n.+70px+verran.+Kun+sitten+estin+tulemasta,+otsikon+etäisyys+otsikkokuvasta+heittelee.++Kaikki+liittynee+tuohon+CSS:ään.+Etusivulla+täytyy+korjata+tuo+kauneusvirhe.Hiivatin+ärsyttävä+asia++teeman+CSS:ssä+on+se,+että+otsikko+tulee+joillakin+leveyksillä+kuvan+päälle+ja+toisilla+ei.++Minkää+*piip*+takia+joku+on+moista+pelleilyä+harrastanut.+Korjaaminen+on+*piip*+hankalaa+ja+ärsyttävää.+No+ei+tässä+leiskassa+muuta+todella+pannuun+ottavaa+CSS:ää+ole.+Sohaisit+kohtaa,+joka+minua+potuttaa!+Foorumille+piti+määrittelyjä+uusia,+että+kommentit+olisivat+aina+järkevän+kokoisia.googleta....+nimimerkillefont+size+2em;Mutta+ei+kai+se++poista+sitä+ongelmaa,+että+2em.+300-400px+levyisessä+laitteissa+ylisuurta+ja+1600px+laitteissa+taas+aika+pientä.++Fontin+tulee+olla+järkevässä+suhteessa+sekä+laitteen+resoluutioon+ja+sekä+laitteen+kokoon.Pieni+resoluutio+kasvattaa+fonttikokoa+ja+suuri+pienentää.+Pieni+koko+++pieni+reso+vaatii+pienen+fontin.+Pieni/pienehkö+laite+&+suuri+resoluutio+vaatii+suhteellisen+suuren+fonttikoon.@media+säännötmeta+tag+puhelin+1.0puhelinkohtaiset+säädöt+-+ei+sentään,+ei+niissä+pysy+kärryillä+ja+millä+tasolla+niitä+on+tuettu.
  17. Tämä+on+harrastus,+joten+ei+niin+väliä,+jos+mene+vähän+aikaa.Laitoin+foorumille+viisi+eri+fonttikokoa310+-+481482+-+593594-1060-1080+eli+HD-näyttö1520-1668+eli+iPad+++2K+-laitteetMarginaaleit+saisivat+olla+parempia.
  18. No+hyvä.+Tosin+minulla+ei+sitten+ole+pinintäkään+hajua+siitä,+että+jos+laitteet+kääntää+toisin+päin,+kuinka+iso+ero+syntyy.+Tiedän+vain+sen,+että+jää+paljon+tyhjää+tilaa+ja+fontti+on+melko+pientä.Kuten+kerroin,+yleensä+vain+leveys+on+hallittu,+kuten+esim.+tässä+sivustossa.+Tässäkin+on+tavallaan+kolme+tasoa+kuten+Matkapuhelinfoorumin+sivustossa.+Kun+leveys+saavuttaa+tietyn+pisteen,+se+ei+siitä+levene,+se+on+se+toinen+käännepiste.+Arvioisin,+että+se+toinen+käännepiste+on+laskeuttu+ihan+samoin+kuin+foorumini+leiskassa+eli+n.+1280px.+Ydinkäännepisteet+siis+samat+800+ja+1280.Sen+verran+nätimmin+tämä+sivusto+käyttäytyy,+että+lukualue+tulee+keskelle.+WordPress-leiskassa+tyhjä+alue+jää+oikeaan+reunaa.+Hukkatilaa+silti.
  19. Jos+säädät+selainikkunan+iPadilla+1060-1080+välille@media+screen+and+(min-width:1060px)+and+(max-width:1080px)+{saat+16px+tekstin.+Tiedän,+että+tulla+arvolla+HD-kännykällä+sivustoni+on+varsin+luettava.Toimii+annetuilla+pieniresoluutioisilla+näytöilläkin,+joskin+320+px+suhteen+foorumilista+menee+vähän+sumppuun,+mutta+on+silti+luettavissa.iPhone+X+......................375x+812tuo+on+ongelma,+jos+laitteen+laittaa+vaakasuuntaan.+812+px+kun+on+suunniteltu+pystynäytölle.+Kaikille+valikoille+ei+ole+tilaa+avautua.Oli+hyvä+tiettä,+että+varsin+pienetkin+pikseliarvot+on+syytä+ottaa+huomioon.
  20. iPad+..............................768x1024iPad+Pro+.....................1024x1366Jos+olet+laittanut+pienennettyyikkunaan,+noilla+leveysarvoilla+iPadeissa+teksti+on+pientä,+koska+se+on+oletuskokoista.+Oletuskoko+ei+toimi+korkearesoluutioisella+näytöllä.Android-tabletilla+selain+käyttää+koko+näytön+pinta-alaa.+Oletin,+että+iPadin+käyttäjät+myös+käyttävät+koko+ikkunaa.++Koska+CSS+reagoi+vain+ja+ainoastaan+selainikkunan+kokokoon,+on+mahdotonta+huomioida+muu+kuin+täysi+selainikkuna.
    21. 383 / 386
TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt