CSS響應式設計：如何改善我的頁面？

Question

我在Web開發方面有經驗，但在移動開發方面則零經驗。 因此，我購買了網站模板（html5 + css3），然后將其用作PHP網站的起點。

不過，有些網頁在移動設備上無法正常運行。 當我測試此頁面時 ，文本無法調整到移動屏幕上。 更糟糕的是，當我在iOS上進入“閱讀器”模式時，只顯示了大銀圈，而不是實際的文字。

如何解決？

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

 <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的寬度為700px和940px，這正在擴展您的內容。 如果您在媒體查詢中將它們設置為100％，它應該可以工作。

例如

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