There are two areas in this one page.
One area is A, another is B. The size and layout of A and B depends on the size of the window, as area B has 4 buttons with dynamic size.
The 4 buttons in the area B with 2x2 layout. They have a minimum height and width in pixel, and minimum margin in pixel regardless of the size of window. These two restrictions define the minimum size of area B (height: Bh_min, width: Bw_min, with button height Buh_min, Buw_min).
Here's how the layout and size of A and B is determined. Say the window size is Wh in height and Ww in width.
If Wh>2*Bh_min and Ww>=Bw_min: resize the buttons inside B proportionally in both width, height and margin by up to Ww/Bw_min, in the pre-condition that area B must not occupy more than half of Wh, and stays at the bottom of the window. Area A takes the above.
ElseIf Ww>2*Bw_min and Wh>=Bh_min: resize the buttons inside B proportionally in both width and height and margin by up to Wh/Bh_min, in the pre-condition that area B must not occupy more than half of Ww, and stays at the right side of the window. Area A takes the left side.
ElseIf Wh>=Ww, area B with minimum size stays on the bottom, and A on the top.
Else area B with minimum size stays on the right, and A on the left.
The layout should adjust according to the rules above when resizing, mobile device rotating.
Need to test with Android and iOS devices, as well as mainstream browsers (Firefox, Chrome) on desktop computers.
For the 4 cases, for case 1 and 3 the layout is like "layout - vertical"; case 2 and 4 is "layout - horizontal". They are only for demo purpose, and details should rely on the rules in the description.
No background, color or image is needed. The critical part is the layout adjustment based on the size (orientation) of the window.