材料设计网格不适应手机

Question

我正在为我的网站创建一个设计更新，我从引导开始并执行以下操作：http://lmprepa.fr/beta/index.html

然后，我发现了材料设计Lite，并重新启动了这一切。

我做了这个：http://lmprepa.fr/beta/index-new.html

网格在桌面上运行良好，当您调整窗口的大小时，它会适应，但是，当您在移动网站上运行时，它会显示得像在宽屏幕上一样。

我的代码是：

<main class="mdl-layout__content">
<div class="mdl-grid chap-container">
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Sommations</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Logique, ensembles et applications</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Fonctions usuelles</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Nombres complexes</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Calcul de primitives et d'intégrales</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Equations différentielle linéaires</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Entiers naturels et ensembles finis</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Ensembles ordonnés et réels</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Suites réelles et complexes</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Limites</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Continuité</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Dérivabilité</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Espaces vectoriels</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Intégration</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Espaces vectoriels de dimension finie</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Géométrie plane</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>
    <a class="mdl-cell mdl-cell--4-col chap-link" href="index_new.html">
        <div class="mdl-grid chap">
            <div class="mdl-cell mdl-cell--10-col mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                <strong>Arcs paramétrés</strong>
            </div>
            <div class="chap-icons mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
                <i class="material-icons  chap-icon">class</i>
                <i class="material-icons chap-icon">format_list_bulleted</i>
            </div>
        </div>
    </a>


</div>
<h1>LMPrépa, qu'est-ce que c'est ?</h1>

​

Answer 1

我发现了这个问题，我忘了在标题中写：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我添加了它，它解决了我所有的布局问题。

(谢谢你的答覆:)

Answer 2

您可以使用mdl-layout--small-screen-only在小屏幕中显示您想要的内容，然后在大屏幕布局中显示您想要的内容的mdl-layout--large-screen-only。相当乏味，但你可以在什么屏幕上显示你想要的东西。

对于锚点中的每个mdl-cell，也要添加一个mdl-cell--6-col-tablet mdl-cell--3-col-phone，其中包含希望在小屏幕中显示的列值。