html - 如何让这个页面在大多数浏览器和分辨率下自动调整大小？

问题描述

我知道这个问题的答案是-1，但是如果您查看代码，您会发现我一直在此页面上努力工作，但我无法调整大小。

我尝试了几种不同的技术，包括 css 和 html，但似乎没有任何效果，有人可以告诉我如何做到这一点吗？该页面用于教 5 岁和 6 岁的儿童阅读，我们希望它在大多数分辨率下都适合浏览器窗口，并且没有滚动条。我包含了一些代码，因为如果没有它，我将无法发布，请参阅 codepen 链接以获取实际代码。这是这里的代码，页面的实际功能在代码笔上不起作用，这不是问题，如果您在本地测试它，页面会执行它应该做的事情。

    <!DOCTYPE html>
<html>

<head>

    <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">

    <style>
        html{
    max-width:100%;
    max-height:100%;
}
body{
    max-width:100%;
    max-height:100%;
    
}
        .main-grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 3rem;
            max-width: 50rem;
        }

        .container-single-letters {
            display: grid;
            grid-template-columns: repeat(9, 2em);
            gap: 10px;
        }

        .container-consonant-teams {
            display: grid;
            grid-template-columns: repeat(7, 3em);
            gap: 10px;
        }

        .consonant-teams-header {
            grid-column-start: 1;
            grid-column-end: 8;
            grid-row-start: 1;
            grid-row-end: 1;

            background-color: lightcoral;
            font-size: x-large;
            padding: .5em;
            text-align: center;
        }

        .vowel-teams-row {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 2;
            text-align: center;
        }

        .vowel-teams-header {
            background-color: lightgray;
            font-size: x-large;
            padding: .5em;
        }

        .vowel-teams-table,
        td {
            border: gray 1px solid;
            text-align: center;
            border-collapse: collapse;

            font-family: 'Poiret One', cursive;
            font-weight: 700;
            font-size: 1.0rem;
            letter-spacing: 0.2em;
            text-align: center;
            vertical-align: center;

            max-width: 100%;
            table-layout: fixed;

            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 3;
            grid-row-end: 3;

            padding: 0.5rem;
        }

        .vowel-teams-sound {
            border: 1px solid red;
            background-color: white;
            border-radius: .5em;
            padding: 5px;
            cursor: move;
            font-family: 'Poiret One', cursive;
            font-weight: 700;
            font-size: 1.0em;
            letter-spacing: 0.2em;
            text-align: center;
        }

        .vowel-team {
            cursor: move;
            font-size: 1.0em;
        }

        .sounds-container {
            display: grid;
            grid-template-columns: 5em repeat(13, 4em);
            gap: 2px;

            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 4;
            grid-row-end: 4;
        }

        .sounds-header {
            font-size: x-large;
            vertical-align: middle;
            align-content: center;
        }

        .sounds-box {
            border: 3px solid cornflowerblue;
            background-color: #ddd;
            border-radius: .5em;
            padding: 3px;
            font-family: 'Poiret One', cursive;
            font-weight: 700;
            font-size: .9em;
            letter-spacing: 0.1em;
            text-align: center;
        }

        .sounds-box.over {
            border: 3px dotted cornflowerblue;
        }

        .box {
            border: 3px solid #666;
            background-color: #ddd;
            border-radius: .5em;
            padding: 5px;
            cursor: move;
            font-family: 'Poiret One', cursive;
            font-weight: 700;
            font-size: 1.0em;
            letter-spacing: 0.2em;
            text-align: center;
        }
        .conbox {
            border: 3px solid #008000;
            background-color: #FFD300;
            border-radius: .5em;
            padding: 5px;
            cursor: move;
            font-family: 'Poiret One', cursive;
            font-weight: 700;
            font-size: 1.0em;
            letter-spacing: 0.2em;
            text-align: center;
        }
        .vowlbox {
            border: 3px solid #666;
            background-color: #ddd;
            border-radius: .5em;
            padding: 5px;
            cursor: move;
            font-family: 'Poiret One', cursive;
            font-weight: 700;
            font-size: 1.0em;
            letter-spacing: 0.2em;
            text-align: center;
        }
        .blueconbox {
            border: 3px solid blue;
            background-color: #FFD300;
            border-radius: .5em;
            padding: 5px;
            cursor: move;
            font-family: 'Poiret One', cursive;
            font-weight: 700;
            font-size: 1.0em;
            letter-spacing: 0.2em;
            text-align: center;
        }
        .vowlgreybox {
            color: red;
            border: 0px solid #666;
            background-color: lightgray;
            border-radius: .5em;
            padding: 3px;
            cursor: move;
            font-family: 'Poiret One', cursive;
            font-weight: 700;
            font-size: x-large;
            letter-spacing: 0.2em;
            text-align: center;
        }
    </style>

标签： htmlcss

html - 如何让这个页面在大多数浏览器和分辨率下自动调整大小？

问题描述

解决方案

推荐阅读