Avatar billede cgsdk Novice
12. august 2016 - 10:59 Der er 8 kommentarer

Ændring af font størrelse

Hejsa, er helt ny i dette forum så hvis mit spørgsmål ikke er oprettet korrekt beklager jeg...

Jeg har brug for hjælp til følgende: Sidder og programmerer en hjemmeside i et css system hvor det også er muligt at lave html kodning. Er det muligt at indsætte en kode der tilpasser en font størrelse på overskrift når den vises på mobil? Hvis font vises som str. 72 px på skærm men kun skal vises som str. 42px på mobil visning - kan dette så lade sig gøre - og hvad er koden til dette?

Tænker selv at det er noget med
@mediascreen

Håber på svar - så jeg kan lave min hjemmeside ordentligt responsiv med pænt udseende på en mobil telefon

På forhånd tak
Avatar billede keysersoze Guru
12. august 2016 - 11:10 #1
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

Hvis du kigger på et system som Bootstrap kan du se et stort og sammenhængende eksempel/framework på en responsiv løsning - i øvrigt et framework rigtig mange benytter (på godt og ondt) da man får alle scenarier foræret.
Avatar billede olsensweb.dk Ekspert
12. august 2016 - 11:15 #2
Avatar billede cgsdk Novice
12. august 2016 - 11:15 #3
Tak, men synes ikke jeg kan se formlen for at ændre font størrelse, måske det bare er mig?
Avatar billede Slater Ekspert
12. august 2016 - 11:25 #4
Er problemet at du ikke kan skrive CSS, men kun HTML med inline style?

I så fald kan du ikke lave media queries. Men du kan muligvis snyde systemet ved at lave et <style> tag i HTML'en. Det er teknisk set ukorrekt at lave det andre steder end i <head>, men det understøttes af alle browsere.

Så hvis det er problemet, så kan du f.eks. skrive midt i HTML'en:

<h1>Overskrift</h1>
<style>
@media (max-width: 991px) {
    h1 { font-size: 80%; }
}
</style>

- bare som eksempel.
Avatar billede cgsdk Novice
12. august 2016 - 11:46 #5
har lige forsøgt... OG det virker ikke - måske jeg har indsat det forkert?

<div class="kolonne3">
<h1 style="text-align: right;vertical-align:top"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#cc9933;"><span style="line-height:55px;font-size:72px;"> Markedsf&oslash;ring og reklamegaver er en investering<strong></strong></span></span></span></h1>
<style type="text/css">@media (max-width: 991px) {
    h1 { font-size: 80%; }
}
</style>
</div>

Alternativt er jeg selv ude i noget a la dette:

@media screen an (max-width:320px)
h1{Fontsize:36px;}

Dette kan jeg indsætte i en css template fil eventuelt eller hvad tænker du?
Avatar billede Morten Riis Juniormester
12. august 2016 - 12:51 #6
Hej

Det er fordi at du har inline style (style direkte på dine html elementer) de bliver ikke overskevet af styles ved mindre du bruger !important:

<div class="kolonne3">
<h1 style="text-align: right;vertical-align:top"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#cc9933;"><span style="line-height:55px;font-size:72px;"> Markedsf&oslash;ring og reklamegaver er en investering<strong></strong></span></span></span></h1>
</div>

<style type="text/css">
  @media (max-width: 991px) {
        h1 { font-size: 20px !important; }
    }
</style>

Bedst er det at ligge alt din style ud som en klasse, så kan det genbruges andre steder også:

<h1 class="minStyle">Markedsf&oslash;ring og reklamegaver er en investering</h1>

<style>
    .minStyle {
        text-align: right;
        vertical-align:top
        font-family:arial,helvetica,sans-serif;
        color:#cc9933;
        line-height:55px;
        font-size:72px;
        font-weight: bold;
    }
  @media (max-width: 991px) {
        .minStyle { font-size: 20px; }
    }
</style>
Avatar billede Morten Riis Juniormester
12. august 2016 - 13:17 #7
Her et eksempel hvor der laves to størrelses skift (træk i stregen over til html/javascript for at "lege" med bredden): http://jsfiddle.net/ModuLIZER/8unkr4he/
Avatar billede cgsdk Novice
12. august 2016 - 13:30 #8
Kære Morten du er ikke længere junior mester i min bog - men ekspert :-)  Det er jo fantastisk :-) :-)  Måske du kan hjælpe med et andet problem også? Det drejer sig om baggrund på 3 kolonner?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester