Gå til innhold

Korleis få sida mi lettast mogleg responsiv?

ZenCo

Av ZenCo
i Programmering og webutvikling

Anbefalte innlegg

ZenCo

ZenCo

Skrevet
Skrevet (endret)

Hei!

 

 

Eg har no lest masse om, samt testa, både Skeleton og Flex-box. I tillegg har eg prøvd meg på både em, rem og % ved posisjonering og storleik. Men det er så langt ingenting som har fungert slik eg vil.

 

Designet på sida er for meg meir utfordrande å få responsivt enn det eg trudde. Eg ynskjer at designet skal sjå eksakt slik ut uansett browserskjerm, utanom mobil(der er eit eige design). Dette inkluderer font-size. Hadde alt oppført seg som img, ville vel dette fungert utmerka med Skeleton. Der berre gir eg ein viss storleik, også følger den på. Men når eg har tekst som til dømes skal ligge nede langs eit bilete, fylgjer det ikkje på grunna typografi er eit helsike å få responsivt. 

 

 

Eg er litt ny i gamet, så ved berre å sjå på vedlegget: Kan eg få det såpass responsivt som eg vil? Eller må eg godta at ting flyttar litt på seg? Kva teknikk er det som passar? Sjølv om eg har sjekka ut fleire metodar, er det ikkje sikkert eg har satt meg godt nok inn i dei.

 

 

Takk! :)

post-81802-0-56768800-1461862247_thumb.png

Endret av ZenCo
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Emancipate

Emancipate

Skrevet
Skrevet

 

 

Kan eg få det såpass responsivt som eg vil? Eller må eg godta at ting flyttar litt på seg?
Responsivt betyr at ting flytter på seg. Slik at det ser annerledes ut på mindre skjermer. Fordi at når det ser likt ut på en mindre skjerm, så ser det likevel ikke likt ut, for alt blir så sabla smått.

 

Eg ynskjer at designet skal sjå eksakt slik ut uansett browserskjerm

Bruk piksler på alle enheter - men da blir det ikke responsivt.

 

Vis hvordan du vil at det skal se ut på forskjellige skjermoppløsninger og størrelser. Da gir du folk her muligheten til å hjelpe deg med å kode det.

Lenke til kommentar
Emancipate

Emancipate

Skrevet
Skrevet (endret)

Ok, jeg skjønner problemet. Du trenger en font-størrelse som er relativ til størrelsen på vinduet, ellers forvrenges ting. Her måtte jeg google, og lærte noe nytt. :)

 

https://css-tricks.com/viewport-sized-typography/

 

(Personlig ville jeg bare lagd teksten hide and seeek som et del av bildet, men, men).

 

Flexbox tror jeg ikke det er så mange nettlesere som støtter enda.

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <link rel="stylesheet" href=".css">
    <style>
        html, body {
            margin: 0px;
            padding: 0px;
           
        }
        #main_bg {
            width: 100%;
        }
        #main_section {
            position: relative;
        }
        #main_text {
            position: absolute;
            top: 5%;
            left: 10%;
            width: 35%;
           
            font-family: sans-serif;
            font-size: 1.3vw;
            font-weight: bold;
            color: white;
           
            text-shadow: 0px 0px 2px grey;
           
        }
        #main_header_text {
            position: absolute;
            top: 34.5%;
            left: 56%;
            font-family: Verdana;
            font-size: 3.8vw;
            line-height: 115%;
            font-weight: bold;
            color: white; /*rgba(1, 1, 1, 0.5);*/
            letter-spacing: 1.45vw;
        }
       
        #main_header_text #tab {
            display: inline-block;
            width: 5.7vw;
        }
    </style>
</head>

<body>
    <div id="main_section">
        <img id="main_bg" src="http://www.diskusjon.no/uploads/monthly_04_2016/post-81802-0-56768800-1461862247.png">
        <div id="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id diam aliquam, elementum leo at, auctor leo. Donec facilisis et erat pharetra vehicula. Quisque vulputate mi ut lectus imperdiet, nec varius mi consectetur. Nam sollicitudin dolor dolor, eget aliquet est mattis imperdiet. Maecenas tristique risus in mauris tristique, elementum rhoncus ipsum molestie. Nullam consequat, est eget tristique faucibus, purus diam lobortis massa, vel pulvinar neque leo in neque. Integer id risus quis lorem commodo viverra in vel nisl. </div>
        <div id="main_header_text">HIDE & <br><span id="tab"></span>SEEEK</div>
    </div>


</body>
</html>
Endret av Emancipate
Lenke til kommentar
haugsand

haugsand

Skrevet
Skrevet

Støtten for flexbox begynner faktisk å bli meget god, og kan trygt brukes, så lenge du tester siden en ekstra gang i IE 11: http://caniuse.com/#search=flexbox

 

Et meta viewport-element bør legges til head, så siden skalerer riktig på mobiler og på andre skjermer med høy pikseltetthet: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

 

Eksempel: <meta name="viewport" content="width=device-width, initial-scale=1">

 

I tillegg vil jeg anbefale følgende teknikk for å angi dynamiske tekststørrelser: http://snook.ca/archives/html_and_css/font-size-with-rem

Lenke til kommentar
Emancipate

Emancipate

Skrevet
Skrevet

 

 

Støtten for flexbox begynner faktisk å bli meget god, og kan trygt brukes, så lenge du tester siden en ekstra gang i IE 11: http://caniuse.com/#search=flexbox
76% = meget god, javel.

 

Et meta viewport-element bør legges til head, så siden skalerer riktig på mobiler og på andre skjermer med høy pikseltetthet: https://developer.mo...ewport_meta_tag

Dette må bare legge til hvis man faktisk vet hva det gjør, og ønsker det. Det skal ikke legges til som standard "bare fordi". F.eks. skal man ikke bruke det hvis man ikke har laget sida sånn at den ser bra ut ved lave oppløsninger (f.eks. med media query).

Lenke til kommentar
haugsand

haugsand

Skrevet
Skrevet

Støtte for flexbox er 94,1 % på verdensbasis, og enda høyere i Norge, om du tar hensyn til kjente, beskrevne feil i IE11 og andre nettlesere. Siden bruk av flexbox kan føre til vesentlig forenkling av kode, synes jeg det er verdt å vurdere i nye prosjekter.

 

Vær oppmerksom på at mobile nettlesere forsøker å skalere tekststørrelser på egen hånd dersom viewport ikke er angitt. Oppførselen kan variere fra nettleser til nettleser, og er ikke alltid forutsigbar. Enkelte elementer får for eksempel skalert tekststørrelse, mens andre ikke får det. 

Lenke til kommentar

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å
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...