CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

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.

Synes godt om

olsensweb.dk Ekspert

12. august 2016 - 11:15 #2

du skal anvende media queries
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.w3schools.com/css/css3_mediaqueries_ex.asp
http://www.w3schools.com/css/css_rwd_mediaqueries.asp

du kan gører det nemmere for dig selv ved at bruge et css framework
det mest udbredte er bootstrap
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/

Synes godt om

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?

Synes godt om

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.

Synes godt om

1 synes godt om dette

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ø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?

Synes godt om

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ø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ø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>

Synes godt om

1 synes godt om dette

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/

Synes godt om

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?

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS