css響應式設計：如何提高我的頁面？

Question

我有網頁開發經驗，但在移動開發方面沒有經驗。因此，我購買了一個網站模板（html5 + css3），然後我用它作爲PHP網站的起點。

雖然有些網頁在手機上的效果不佳。當我測試this page時，文字大小並不適用於手機屏幕。更糟糕的是，當我在iOS上進入Reader模式時，只是顯示了銀戒指的大圖像，而不是真實的文字。

這怎麼解決？

負責顯示文本塊中的代碼如下：

<div class="container"> 
      <div class="content_block row"> 
       <div class="fl-container span9"> 
        <div class="row"> 
         <div class="posts-block span12"> 
          <div class="contentarea"> 

           <div class="row-fluid"> 
            <div class="span12 module_cont module_text_area module_medium_padding"> 
             <h3 class="headInModule"></h3> 

             <p>Les prestations commencent à partir de 250 euros.</p> 

             <p>Lors de ma prestation, je suis à votre entière disposition pendant un 
              nombre d’heures qui varie en fonction de la formule choisie. </p> 

             <p>Je m’engage à délivrer les photos dans un délai de 4 semaines suivant le 
              mariage.</p> 

             <p>Les frais de déplacement sont inclus dans la région Alsace-Lorraine, 
              Luxembourg et Province Luxembourg en Belgique. Pour toute autre région, 
              veuillez me contacter.</p> 
            </div> 
           </div> 
           <!-- .row-fluid --> 

           <div class="row-fluid"> 
            <div class="span12 module_cont module_text_area module_medium_padding"> 
             <img src="/img/bronze.jpg" alt="formule bronze" 
              style="float:left"/> 

             <div style="float:right"> 
              <h3 class="headInModule">Formule Bronze</h3> 
              <a id="anchor1"></a> 

              <ul class="list_type1"> 
               <li>6H de prestation le jour du mariage * (plage horaire à préciser 
                avec les mariés) 
               </li> 
               <li>Rencontre des futurs mariés avant le mariage et signature du 
                contrat de prestation 
               </li> 
               <li>La prestation comprend un photo reportage permettant de couvrir 
                les thèmes suivants: 
                <ul> 
                 <li>préparatifs (habillage, maquillage, coiffeur)</li> 
                 <li>cérémonie</li> 
                 <li>photos de couple ou/et de groupe</li> 
                 <li>vin d’honneur</li> 
                </ul> 
               </li> 
               <li>Travail de post-production et de retouches</li> 
               <li>1 DVD contenant les photos retravaillées en haute résolution 
                (min. 150 photos) 
               </li> 
               <li>Galerie photo internet sécurisée et disponible pendant 1 an 
                minimum. 
               </li> 
               <li>Cession intégrale des droits de reproduction dans un cadre privé 
                uniquement. 
               </li> 
              </ul> 
              <i>prix sur demande</i> 
             </div> 
            </div> 
           </div> 
           <!-- .row-fluid --> 

Answer 1

你的類.span9和.span12擁有700像素和940px這是拉伸你的內容的寬度。如果您在媒體查詢中將這些設置爲100％，它應該可以正常工作。

例如

@media only screen and (max-width: 770px){ 
    .span9, .span12 {width:100%;} 
}