CSS网格的响应式设计

Question

我试图在容器div中放置两个占1：2比例的div。当在更宽的屏幕上，如768px或智能手机上的横向模式时，它们将是并排的。但是在智能手机上的纵向模式等较窄的屏幕上，它们将被堆叠在另一个之上。如何通过媒体查询完成此操作？这是我尝试过的（注意：div需要用JS创建）：

＆＃13;

＆＃13;

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
}

＆＃13;

.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;
}

＆＃13;

<main></main>

＆＃13;

＆＃13;

＆＃13;

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*/
}

}

＆＃13;

＆＃13;

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
}

＆＃13;

.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;
}

＆＃13;

<main></main>

＆＃13;

＆＃13;

＆＃13;