MDCSS v2 Berechnung der Position (responsive)

dirk_1930

Hallo zusammen,

ich versuche gerade eine Karte aus dem MD_Simple Projekt anzupassen.
Als Beispielauflösung habe ich eine Breite von 360px angenommen, mit jeweils einem Rand rechts und links von 15px und 3 Elementen von 100px Breite.
Für das 1. Element nutze ich bei der linken Position calc(100% - 345px), 2. calc(100% - 230px) und 3. calc(100% - 345px).
Das funktioniert natürlich nur bei der fixen Auflösung.
Wie bekomme ich das jetzt so berechnet, dass sich bei einer Auflösung von zb. 400px die Elemente wieder richtig aufteilen - bzw. funktioniert das überhaupt?

dirk_1930

@dirk_1930 said in MDCSS v2 Berechnung der Position:

Hallo zusammen,

ich versuche gerade eine Karte aus dem MD_Simple Projekt anzupassen.
Als Beispielauflösung habe ich eine Breite von 360px angenommen, mit jeweils einem Rand rechts und links von 15px und 3 Elementen von 100px Breite.
Für das 1. Element nutze ich bei der linken Position calc(100% - 345px), 2. calc(100% - 230px) und 3. calc(100% - 345px).
Das funktioniert natürlich nur bei der fixen Auflösung.
Wie bekomme ich das jetzt so berechnet, dass sich bei einer Auflösung von zb. 400px die Elemente wieder richtig aufteilen - bzw. funktioniert das überhaupt?

Ich glaube ich hab es...
Element 1:
left: calc(100% - 95%)
width: calc(25%)

Element 2:
left: calc(50% - (31.25% / 2)
width: calc(31.25%)

Element 3:
left: calc(95% - (25%)
width: calc(25%)

Mal schaun, wie es dann bei 3 oder mehr Elementen wird...

darkiop

@dirk_1930

Schau dir Mal vw/hw

https://www.mediaevent.de/schriftgroessen-immer-ein-griff-ins-wespennest/

an.

dirk_1930

@darkiop said in MDCSS v2 Berechnung der Position:

@dirk_1930

Schau dir Mal vw/hw

https://www.mediaevent.de/schriftgroessen-immer-ein-griff-ins-wespennest/

an.

Die vw bzw. hw kannte ich noch gar nicht...
Grundsätzlich ist das eigentlich perfekt, nur hab ich jetzt das Problem, dass auf dem Ipad z.B. im Querformat der Viewport größer ist - d.h. das Element wird auch entsprechend größer und passt dann nicht mehr in die Card Ansicht. Da müsste man noch etwas anpassen - nur bin ich jetzt nicht wirklich fit in CSS. Vielleicht hat da jemand eine Idee?

dirk_1930

Ich habe jetzt einmal versucht über ein HTML Element seine Eigenschaften abzufragen...
Window getComputedStyle()

Leider erscheint bei den Werten zu der Position jeweils auto, sobald ich in den CSS Eigenschaften z.B. 20vw angebe.

<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>
<h2 id="element" style="background-color:lightblue">
The getComputedStyle() Method</h2>

<p>The computed styles for the test element are:</p>
<p id="demo"></p>

<script>
const element = document.getElementById("element");
const cssObj = window.getComputedStyle(element, null);

let text = "";
for (x in cssObj) { 
  cssObjProp = cssObj.item(x)
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
console.log(text);
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

dirk_1930

Habe noch eine andere Möglichkeit gefunden - allerdings auch ohne Ergebnis.
Using getBoundingClientRect to Get an Element's Size and Position

<body>
  <div id="hello">Hello World</div>

  <script>
  const helloElement = document.getElementById('hello');
  const results = helloElement.getBoundingClientRect();
  console.log(results);
  </script>

</body>

ergibt...

DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}bottom: 0height: 0left: 0right: 0top: 0width: 0x: 0y: 0[[Prototype]]: DOMRect

Frage ich das falsche Element ab?

Community Forum

NEWS

MDCSS v2 Berechnung der Position (responsive)

Support us

405

32.8k

82.8k

1.3m