Material Design Lite 网格不适应手机

Question

我正在为我的网站创建设计更新，我从 bootstrap 开始并这样做了：http://lmprepa.fr/beta/index.html
然后我发现了 Material Design Lite 并以此重新启动。
我这样做了：http://lmprepa.fr/beta/index-new.html
网格在桌面上运行良好，当您调整 window 时它会适应，但是，当您在移动设备上访问网站时，它的显示就像在宽屏上一样

我的代码是：

<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

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

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

Answer 2

我发现了问题，我忘了在 header 中写 :

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

我添加了它，它解决了我所有的布局问题
感谢您的回答:)

Material Design Lite 网格不适应手机

Material Design Lite grid not adapting on mobiles

html

css

material-design

material-design-lite