材料設計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，其中包含要在小屏幕中顯示的列值。