我正在为我的网站创建一个设计更新，我开始使用bootstrap并执行此操作：http://lmprepa.fr/beta/index.html
然后我发现了Material Design 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>
答案 0 :(得分：2)
我发现了问题，我忘记了在标题中写了：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我添加了它，它解决了我所有的布局问题
谢谢你的回答：）
答案 1 :(得分：0)
您可以使用mdl-layout--small-screen-only在小屏幕中显示所需内容，然后mdl-layout--large-screen-only显示您希望在大屏幕布局中显示的内容。相当乏味，但你可以在什么屏幕上显示你想要的东西。
同样对于您锚点中的每个mdl-cell，添加一个mdl-cell--6-col-tablet mdl-cell--3-col-phone，其中包含您希望在小屏幕中显示的列值。