材料设计Lite网格不适用于手机

Question

我正在为自己的网站创建设计更新，我从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> 

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，其中包含要在小屏幕中显示的列值。