praegune kellaaeg 26.04.2024 22:15:50
|
Hinnavaatlus
:: Foorum
:: Uudised
:: Ärifoorumid
:: HV F1 ennustusvõistlus
:: Pangalink
:: Telekavad
:: HV toote otsing
|
|
autor |
sõnum |
|
es1
HV kasutaja
liitunud: 01.02.2008
|
09.03.2022 14:09:10
Kuidas erinevalt scaletud displayd ühtsetena näidata? |
|
|
Mul on OSis display scale 100%, panen erinevates resodes ilusti asjad paika. Peale seda tuleb keegi ja ütleb, et kogu teema on liiga suur, kuna tema display scale on OSis pandud 125%. Kuidas sellist asja ühtsutada, et tema arvutis scaleks lehekülge 25% väiksemalt? Öelda, et pane scaling 100% pole võimalik, ega mõtet, sest see on paljudel läptopidel 125% default, ehk recommended peal.
|
|
Kommentaarid: 9 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
9 |
|
tagasi üles |
|
|
Alan
HV veteran
liitunud: 12.02.2008
|
09.03.2022 15:25:26
|
|
|
Kõlab nagu lehekülg ei ole ehitatud "fluid". Kui lehekülg peaks nägema välja erinevate scalede, brauseri zoom levelitega, siis on see "fluid" ja resolutsioonidega kohanema, siis "responsive".
Mis ühikutes suurused CSSis määratud on?
Tuleb CSS-is suuruseid määratleda nõnda, et need oleks sõltuvusest näiteks viewporti suurusest.
https://www.smashingmagazine.com/2016/05/fluid-typography/
https://css-tricks.com/snippets/css/fluid-typography/
Näiteks, kui määrata root elemendile font-size "vw" (view port width)
siis child elementide "em" ja "rem" ühikud sõltuvad root elemendist, ehk siis
puhul h1 elemendi font size=4vw (root 2vw * child 2em).
Nõnda tuleb kogu disain üles ehitada, fluid & responsive.
Kui kasutuses font-size "px" ühikutes, siis on see fikseeritud ja ei sõltu viewporti suurusest. Nõnda on suuremal resol tekst väikesem, väiksemal resol suurem.
Proof of concept:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html {
font-size: 1vw;
}
h1 {
font-size: 1.5em;
}
p {
font-size: 1em;
}
</style>
</head>
<body>
<h1>tere maailm</h1>
<p>tere tere</p>
</body>
</html> |
Erineva scale/browseri zoomiga on tekst ikka täpselt sama suur. Kui root elemendilt font-size: 1vw eemaldada, hakkab scalemine mõjutama.
|
|
Kommentaarid: 130 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
120 |
|
tagasi üles |
|
|
mikk36
HV Guru
liitunud: 21.02.2004
|
09.03.2022 15:44:16
|
|
|
See meta tag muudab natuke mängu, sest mobiilsed seadmed eelistavad renderdada teravamalt sel juhul asju. Skaala ei ole enam 1:1 ja mobiiliekraani 1080 px laius ei tähenda, et veebileht oleks 1080 px lai.
DPR 3 puhul näiteks on siis veebilehe laiuseks vaid 360 px. DPR väärtust määrab telefon ise (kasutaja saab seda mõjutada, kui muudab seadistusest skaleeringu/teksti suuruse sätet.
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
See võimaldab suurustes kasutada rahulikult px ühikuid edasi.
Edit: tegelikkuses mõjutab see ka desktope, sest ka neil on nüüd levinud skaleerimine. Windows + sülearvuti korral on nüüd üsna levinud näiteks DPR 1.25 ja 1.5 (Settings -> Display -> Scale 125%/150%).
|
|
Kommentaarid: 85 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
2 :: |
78 |
|
tagasi üles |
|
|
es1
HV kasutaja
liitunud: 01.02.2008
|
09.03.2022 16:56:49
|
|
|
Mis mind praegu päästis oli max-height lisamine breakpointi, nii et selle isiku arvutis näeb ka kogu sisu scrollimata ja lahendatud
|
|
Kommentaarid: 9 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
9 |
|
tagasi üles |
|
|
|
lisa lemmikuks |
|
|
sa ei või postitada uusi teemasid siia foorumisse sa ei või vastata selle foorumi teemadele sa ei või muuta oma postitusi selles foorumis sa ei või kustutada oma postitusi selles foorumis sa ei või vastata küsitlustele selles foorumis sa ei saa lisada manuseid selles foorumis sa võid manuseid alla laadida selles foorumis
|
|
Hinnavaatlus ei vastuta foorumis tehtud postituste eest.
|