CSS网格的响应式设计

Question

我试图将两个 div 以 1:2 的比例放置在一个容器 div 中。当在更宽的屏幕（如 768 像素或智能手机的横向模式）上时，它们将并排显示。但在智能手机纵向模式等较窄的屏幕上，它们会堆叠在一起。我将如何通过媒体查询来实现这一点？这是我尝试过的（注意：div需要用JS创建）：

let colors = ['#1F82D2', "#F86A25", "#1697D5"];
let keys = [],
l = colors.length;

for(let i = 0; i < l; i++) {
  keys.push(`title${i}`)
}

let main = document.querySelector('main');
for (let i = 1; i <= l; i++) {
    const attributes = {style: `background: ${colors[i-1]}`}
        , colon = elementFactory('span', {attributes: {style: `color: ${colors[i-1]}`}, text: ":"})
        , h2 = elementFactory('h2', {text: keys[i-1]}, colon)
        , div_header = elementFactory('div', {class: 'topic_head',}, h2)
        , div_content = elementFactory('div', {class: 'topic_content', attributes})
        , div = elementFactory(`div`, { class: 'topic', id: `items${i}`}, div_header, div_content);
    main.appendChild(div);

}

function elementFactory(el, options = {}, ...children) {
    el = document.createElement(el);
    if (options.id) el.id = options.id;
    if (options.class) el.classList.add(options.class);
    if (options.text) el.innerText = options.text;
    if (options.html) el.innerHTML = options.html;
    if (options.attributes) Object.entries(options.attributes).map(([k, v]) => el.setAttribute(k, v));
    children.forEach(child => {
        if (typeof child === 'string') {
            el.appendChild(document.createTextNode(child))
        } else {
            el.appendChild(child)
        }
    });

    return el
}

.topic {
    display: grid;
    height: 100vh;
    font-size: 3.3rem;
    grid-template-columns: 1fr 2fr;
}

@media only screen and (max-device-width : 719px) {
   .topic {
        display: grid;
        height: 100%;
        font-size: 3.3rem;
        grid-template-rows: 1fr 3fr;
    } 
}
.topic_head {
    justify-content: center;
    display: flex;
    font-style: italic;
    font-weight: bold;
    font-family: "Playfair Display";
    font-size: 7rem;
    align-items: center;
}

.topic_content {
    font-family: "Overlock";
    display: flex;
    align-items: center;
    line-height: 1.2;
    color: white;
    
}

body {
  font-size: 10vh;
}

<main></main>

Answer 1

@media only screen and (max-width : 768px) { /*when screen width is equal or smaller than 768px*/
.topic {
  display: list-item; /* to display as list item*/
  height: auto; /* so that height adjust automatically to new content.*/
}

.topic_head {
  width: 100%; /*adjust as you need*/
  height: 100vh; /*adjust as you need*/
}

.topic_content {
  width: 100%; /*adjust as you need*/
  height: 100vh; /*adjust as you need*/
}

}

let colors = ['#1F82D2', "#F86A25", "#1697D5"];
let keys = [],
l = colors.length;

for(let i = 0; i < l; i++) {
  keys.push(`title${i}`)
}

let main = document.querySelector('main');
for (let i = 1; i <= l; i++) {
    const attributes = {style: `background: ${colors[i-1]}`}
        , colon = elementFactory('span', {attributes: {style: `color: ${colors[i-1]}`}, text: ":"})
        , h2 = elementFactory('h2', {text: keys[i-1]}, colon)
        , div_header = elementFactory('div', {class: 'topic_head',}, h2)
        , div_content = elementFactory('div', {class: 'topic_content', attributes})
        , div = elementFactory(`div`, { class: 'topic', id: `items${i}`}, div_header, div_content);
    main.appendChild(div);

}

function elementFactory(el, options = {}, ...children) {
    el = document.createElement(el);
    if (options.id) el.id = options.id;
    if (options.class) el.classList.add(options.class);
    if (options.text) el.innerText = options.text;
    if (options.html) el.innerHTML = options.html;
    if (options.attributes) Object.entries(options.attributes).map(([k, v]) => el.setAttribute(k, v));
    children.forEach(child => {
        if (typeof child === 'string') {
            el.appendChild(document.createTextNode(child))
        } else {
            el.appendChild(child)
        }
    });

    return el
}

.topic {
    display: grid;
    height: auto;
    font-size: 3.3rem;
    grid-template-columns: 1fr 2fr;
}

@media only screen and (max-width : 768px) {
.topic {
    display: list-item;
    height: auto;
}

   .topic_head {
   width: 100%;
}

.topic_content {
   width: 100%;
   height: 100vh;
}
    
}
.topic_head {
    justify-content: center;
    display: flex;
    font-style: italic;
    font-weight: bold;
    font-family: "Playfair Display";
    font-size: 7rem;
    align-items: center;
}

.topic_content {
    font-family: "Overlock";
    display: flex;
    align-items: center;
    line-height: 1.2;
    color: white;
    
}

body {
  font-size: 10vh;
}

<main></main>