CSS响应式设计:如何改善我的页面?

山姆

我在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 -->
娜塔莉·赫德斯特伦(NatalieHedström)

你的类.span9.span12具有700像素和940px这是拉伸你的内容的宽度。如果您在媒体查询中将它们设置为100%,它应该可以工作。

例如

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何缩放我的图像-响应式设计

来自分类Dev

CSS,响应式设计

来自分类Dev

如何使用CSS在响应式设计中屏蔽页面的某个区域?

来自分类Dev

HTML 和 CSS:我如何为响应式设计居中 DIV?

来自分类Dev

CSS div响应式设计

来自分类Dev

响应式设计的CSS问题

来自分类Dev

错误使响应式设计 CSS

来自分类Dev

我应该如何应对响应式设计中的DOM更改?

来自分类Dev

在我的情况下如何创建响应式设计?

来自分类Dev

媒体经理:我该如何改善设计?

来自分类Dev

我对响应式网页设计缺少什么?

来自分类Dev

CSS响应式设计列的顺序

来自分类Dev

用于响应式网页设计的 CSS 技术

来自分类Dev

html和css响应式设计无法按照我想要的方式调整divs的大小

来自分类Dev

如何获得图像的响应式设计?

来自分类Dev

如何为svg提供响应式设计?

来自分类Dev

如何进行响应式图像设计

来自分类Dev

单个css或多个css进行响应式设计-css速度

来自分类Dev

响应式设计-如何让我的图像在左侧占据整个屏幕

来自分类Dev

我做错了什么?“响应式页面”

来自分类Dev

如何为响应式网页设计设计元素?

来自分类Dev

如何使CSS表格单元格达到100%进行响应式设计

来自分类Dev

CSS帮助-如何通过响应式设计使div保持在原位

来自分类Dev

调试响应式设计

来自分类Dev

响应式设计

来自分类Dev

响应式设计行为

来自分类Dev

响应式设计

来自分类Dev

响应式设计

来自分类Dev

响应式设计断点