Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  10 5075
Jeg bruker Bootstrap i kombinasjon med CSS, for å gjøre nettsiden responsiv så har jeg egne CSS filer basert på størrelse på skjermenheten som laster siden. Dette gjør at jeg må redeklarere alle klassene i de forskjellige CSS-filene for å tilpasse størrelsen på elementene til å passe på enheten som laster siden.

Mitt spørsmål er om det er mulig å gjøre dette dynamisk, f.eks. ved at man sier at 1920x1080 har en skaleringsfaktor på 1. Skaleringsfaktoren vil da gå lineært nedover med utgangspunkt i 1920x1080, slik at dersom en enhet på 960x540 så vil skaleringsfaktoren være 0.5.

Dersom alle elementer med "px" da ganges med skaleringsfaktoren, så ville man ha sluppet å definere egne CSS filer for forskjellige størrelser.

Er det noen som vet om dette er mulig, og evt hvordan man gjør det?
Bootstrap er jo responsivt?

Du kan bruke % istede for px. Usikker på hva du mener.
NOOOOOOOOOOOOOOOOOO-
robhol's Avatar
Ja, det kan man. Da bruker man f. eks. media queries.
https://developer.mozilla.org/en-US/..._media_queries

Sitat av Bokmerket Vis innlegg
Bootstrap er jo responsivt?

Du kan bruke % istede for px. Usikker på hva du mener.
Vis hele sitatet...
% er vel og bra, men det lønner seg noen ganger å definere forskjellige proporsjoner eller faste størrelser basert på hva for slags "real estate" man har tilgjengelig. På en tilstrekkelig liten skjerm vil man kanskje skjule en navbar som ellers tar opp 10% eller whatever.
Sist endret av robhol; 28. februar 2017 kl. 10:53.
Bokmerke: Jeg bruker % når det kommer til div's, men hvordan skal man kunne bruke dette når det kommer til font-størrelser?

robhol: Dette ser ut som akkurat det jeg gjør allerede, men man ender jo fortsatt opp med mange CSS filer? Pluss at man må fortsatt redeklarere alle klassene man vil endre fonten på for alle de forskjellige størrelsene?
Sitat av simchris Vis innlegg
Bokmerke: Jeg bruker % når det kommer til div's, men hvordan skal man kunne bruke dette når det kommer til font-størrelser?

robhol: Dette ser ut som akkurat det jeg gjør allerede, men man ender jo fortsatt opp med mange CSS filer? Pluss at man må fortsatt redeklarere alle klassene man vil endre fonten på for alle de forskjellige størrelsene?
Vis hele sitatet...

Dersom du ikke trenger å støtte gamle nettlesere så er vw, vh noe du kan kikke på.
Sist endret av StorBørsteekorn; 28. februar 2017 kl. 17:45.
Sitat av simchris Vis innlegg
robhol: Dette ser ut som akkurat det jeg gjør allerede, men man ender jo fortsatt opp med mange CSS filer? Pluss at man må fortsatt redeklarere alle klassene man vil endre fonten på for alle de forskjellige størrelsene?
Vis hele sitatet...
Høres ut som du burde kikke på SASS, da får du en del utvidet syntaks som hjelper deg med å skrive mer strukturert CSS.

Her er noen eksempler på hvordan media queries i SASS blir seendes ut når det er kompilert til CSS:
http://thesassway.com/intermediate/r...ies-in-sass-32
Fluid Typography er jo det kule nå, som lar deg bruke litt matematikk og størrelsen på siden til å gjøre fontstørrelsene mer responsive: https://css-tricks.com/snippets/css/fluid-typography/
Limited edition
Moff's Avatar
Ut i fra måten du skriver på, så har jeg en veldig sterk følelse av at du ikke bruker Bootstrap-rammeverket til sitt fulle potensial. Jeg driver med webdesign på daglig basis. Jeg bruker Bootstrap og SASS. Alt jeg lager er designet for å skalere bra, fra den minste mobiltelefon til en TV-skjerm. Likevel kjenner jeg ikke igjen problemstillingen med mange CSS-filer og mye redeklarering av klasser.

Har du mulighet til å poste et konkret eksempel med kode, slik at vi kan se hva det er du prøver å gjøre?
Sitat av Yochi Vis innlegg
Fluid Typography er jo det kule nå, som lar deg bruke litt matematikk og størrelsen på siden til å gjøre fontstørrelsene mer responsive: https://css-tricks.com/snippets/css/fluid-typography/
Vis hele sitatet...
Det ser ut som akkurat det jeg er ute etter, har bare sett sånn kjapt, men skal definitivt lese mer på det! Tusen takk

Sitat av Moff Vis innlegg
Ut i fra måten du skriver på, så har jeg en veldig sterk følelse av at du ikke bruker Bootstrap-rammeverket til sitt fulle potensial. Jeg driver med webdesign på daglig basis. Jeg bruker Bootstrap og SASS. Alt jeg lager er designet for å skalere bra, fra den minste mobiltelefon til en TV-skjerm. Likevel kjenner jeg ikke igjen problemstillingen med mange CSS-filer og mye redeklarering av klasser.

Har du mulighet til å poste et konkret eksempel med kode, slik at vi kan se hva det er du prøver å gjøre?
Vis hele sitatet...
Det har du helt sikkert rett i, jeg poster eksempel nedenfor, og hadde satt superstor pris på om du kunne ha slaktet meg

style.css (Dette er hovedfilen)

Kode

.section-title h1 {
	color:#FFF;
	font-size:30px;
	position:relative;
	text-align:center;
	text-transform:uppercase;
}
responsive.css (Dette er filen som har overrides basert på skjermstørrelse)

Kode

/* Small Devices */
@media only screen and (max-width: 767px){
    .section-title-dark h1 {
    font-size:20px !important;
    }
}
Eksempelet ovenfor fungerer jo helt fint, problemet er bare at jeg skulle ønske jeg hadde sluppet å kjøre overrides på de forskjellige skjermstørrelsene.
Limited edition
Moff's Avatar
Nå er det ikke mye tilbakemelding å gi på så lite kode, men et hett tips når det kommer til font-størrelser er å bruke em i stedet for px. Ved å bruke em så setter du font-størrelsen relativ til nærmeste arvede font-størrelse. I praksis kan du da sette en "master-størrelse" på body-elementet, som du endrer med media queries (slik du har gjort ovenfor). På alle andre elementer bruker du em-størrelser, og de vil da være relative i forhold til hva "masteren" står satt til.
nso
popålol
nso's Avatar
Administrator
Som moff skrev; font endrer du størrelse på ved å bruke EM istedetfor PX. Det er også andre måter å definere det på, men la oss holde oss til den enkleste først. EM er relativ til arvet font-størrelse.

Eksempel:

Kode

body {
  font-size: 20px; 
}

h1 {
  font-size: 5em; // Denne er nå 100px. (20px*5em)
}

h2 {
  font-size: 2.3em; // Denne er nå 46px. (20px*2.3em)
}

@media (max-width: 640px) {
  body {
   font-size: 10px; // h1 vil nå være 50px (10px*5em), h2 vil være 23px (10px*2.3em)
  }
}
Du MÅ ikke definere font-størrelsen på body-elementet. Du kan f.eks. ha to DIV'er med forskjellig font-størrelse definert i PX, og da vil de underelementene definert med EM ha størrelse relativ til DIV'en de ligger under.

F.eks.

Kode

div.test1 {
  font-size: 10px; 
}

div.test2 {
  font-size: 5px; 
}

h1 {
  font-size: 2em;
}

....

<div class="test1">
  <h1>Test 1</h1> <!-- Denne vil ha font-størrelse 20px (10px*2em) -->
</div>
<div class="test2">
  <h1>Test 2</h1> <!-- Denne vil ha font-størrelse 10px (5px*2em) -->
</div>
Det du sørger for ved å bruke EM er at størrelsesforholdet mellom de ulike tekstelementene forblir den samme, og at man slipper å skrive om annet enn de elementene det arves fra i @media.
Sist endret av nso; 1. mars 2017 kl. 23:09.