CSS større eller lik X em

5 innlegg i emnet

Skrevet

Har et relativt omfattende CSS media oppsett. Kunne tenkt å fått oppgradert alt av måleenheter fra px til em.

Problemet er bare at om jeg skriver minst 80em og maks 89.99em, og deretter 90em til 100em, vil aldri noen av disse reglene gjelde for enheter med 89.999em.

Tilsvarende om jeg skriver 80em til 90em og 90em til 100em, så vil isåfall begge gjelde om enheten er 90em.

Noen som har en fornuftig løsning?

@media only screen
and (max-width: 359px) {
    /* Watches and other IoT devices */
}

@media only screen
and (min-width: 360px)
and (max-width: 539px) {
    /* Mobile phones */
}

@media only screen
and (min-width: 540px)
and (max-width: 719px) {
    /* Phablets and Mobile phones in landscape mode */
}

@media only screen
and (min-width: 720px)
and (max-width: 959px) {
    /* Phablets in landscape mode */
}

@media only screen
and (min-width: 960px)
and (max-width: 1079px) {
    /* Small tablets */
}

@media only screen
and (min-width: 1080px)
and (max-width: 1279px) {
    /* Tablets */
}

@media only screen
and (min-width: 1280px)
and (max-width: 1439px) {
    /* Laptops */
}

@media only screen
and (min-width: 1440px) {
    /* Desktop monitors and TVs */
}
0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Har du vurdert  prosent (%)? 

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Hvordan fungerer det isåfall?

100% er 100% av bredden på f.eks. skjermen, uavhengig om det er en mobil eller PC, derfor hadde jeg i grunn utelukket %.

Selvfølgelig kan bruke % på alt annet, dvs inni disse media wrappene, tekst størrelser osv, men den biten er allerede konvertert fra px til em.
% vil uansett virke identisk som em, så sånn sett spiller det ingen rolle hvilken av de to jeg bruker. 1em er alltid 100%.

Som standard er 1em samme som 16px, men dette kan en velge helt selv. Er dog litt dumt hvis en øker tekst størrelsen til f.eks 1em=20px, da vil absolutt alt innhold bli forstørret 25% (som å zoome), men media wrappene er fortsatt statisk og skalerer ikke for å tilpasse seg dette.
Løsningen er derfor å bruke em istedet for px også i media wrappene, men da får man problemet jeg nevnte i første post, det er ikke sikkert det er noe media wrapper som matcher, fordi den ligger på skillet mellom to av dem...

En dum løsning er å gjøre noe ala dette, men hadde håpet på noe bedre, mer fornuftig løsning...

@media only screen
and (min-width: 80em)
and (max-width: 89.9999999999999999999999999999999999999999999999em) {
    /* CSS kode kommer her */
}

 

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Setter du 100% på bredde vil den fylle hele margen.  Du kan evnt også vurdere å bruke Bootstrap der det er maler/css forslag. 

Når det kommer til EM har jeg brukt dette lite. Jeg er mer fan, og har sett mer bruk av PX og %. 

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Foretrekker i grunn PX jeg også, brukt det i alle år, men føler det er mer fleksibilitet rundt em (og %).

Du har rett i det at 100% vil fylle hele margen, men slik jeg har brukt media wraps så bare skjuler og viser de innhold basert på hvor mye plass som til enhver tid er tilgjengelig. Med media wraps har jeg altså klart å elegant tilpasse en og samme nettside til bokstavelig talt alle skjermstørrelser, uten at nettsiden blir uoversiktlig stor eller lang på små enheter. Til og med på smartklokken med 1.56 tommer rund skjerm er det lett å navigere, og alt fungerer lynraskt :) Gleder meg til CSS 4 allerede jeg, selv om det sikkert tar noen år før den kommer...

Bruker 100% bredde konstant. Dessuten kan jeg ikke fordra nettsider som gir meg nettbrett-optimaliserte størrelser på en stor PC-skjerm, eller de som viser mobil utgaven på et nettbrett... digi.no og tv2.no er de to verste pr dags dato etter min mening. Grøsser...

Konkluderer etter noen timers research med at løsningen med 50 desimaler er den beste etter forholdene, så får vi se hva 2016 bringer av nye standarder.

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!


Start en konto

Logg inn

Har du allerede en konto? Logg inn her.


Logg inn nå

  • Hvem er aktive   0 medlemmer

    Ingen innloggede medlemmer aktive