BFE.devでのAI解答例 - CSS 質問
10. golden-ratio rectangle

.golden-ratio { background-color: #ccc; width: 161.8px; height: 100px; }

/* For responsiveness, adjust the width to percentage */ @media only screen and (max-width: 767px) { .golden-ratio { width: 100%; height: calc(100vw / 1.618); } }

/* For browsers that do not support calc() / @media only screen and (max-width: 767px) { .golden-ratio { width: 100%; height: 61.8vw; / 100 / 1.618 = 61.8 */ } }

/* For landscape orientation */ @media only screen and (orientation: landscape) { .golden-ratio { height: 60vh; width: calc(60vh * 1.618); } }

/* For browsers that do not support calc() / @media only screen and (orientation: landscape) { .golden-ratio { height: 60vh; width: 97.08vh; / 60 * 1.618 = 97.08 */ } }

Note: The width and height values are just examples and may need to be adjusted depending on the container size and requirements.