Quadrat mit Prozentangaben für Länge und Breite

Moin Moin, wie wahrscheinlich viele bin ich momentan dabei eine Website zu erstellen. In dieser befinden sich 6 DIV´s wo später Bilder eingefügt werden, somit haben diese die Form eines Rechtecks. Zudem habe ich ein Bild in Kreisform (separates DIV). Ich möchte die Website auch auf Mobiltelefonen und jegliche andere Größe gut aussehen lassen, dafür benötige ich Prozentangaben bei der Höhe und Breite der DIV´s (sowohl Quadrate als auch der Kreis). Wie kann ich dieses Problem lösen? Wenn ich width und height denselben Prozentwert zuordne, dann kommt nur Grütze. Hat jemand einen anderen Tipp wie ich die Website "monitor-freundlich" aufbauen kann? Danke schonmal. :)

Der hier verwendete Code

<style> #vier{ height:30vw; width:30vw; margin:0 auto; border:3px solid black; } #kreiss{ height:30vw; width:30vw; border-radius:50%; margin:0 auto; border:3px solid black; } h4{ text-align:center; } </style> <body> <h4>Responsives viereck</h4> <div id="vier"></div> <h4>Resposiver Kreiss</h4> <div id="kreiss"></div> </body>