内容在移动设备上无法响应

在移动设备上查看时，我的网页的页眉和页脚是响应式的，但内容不是。使用的文件是content.php，index.php和content.css。正常的桌面网站显示正常。代码文件如下。内容在移动设备上无法响应

URL是http://responsive.kkits.in/index.php

content.php

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'> 

    </head> 
    <body> 
      <div id="content_area"> 
       <?php echo $content; ?> 
      </div> 

    </body> 
</html>

的index.php

<?php 
include 'header-basic-light.php'; 
$title = "Home"; 
$content = '<img src="images/coffee1.png" class="imgLeft" /> 
<h3>Title 1</h3> 
<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lectus urna, 
    viverra in luctus quis, ullamcorper quis lorem. Vestibulum vulputate pellentesque 
    velit, et placerat dolor pulvinar in. Class aptent taciti sociosqu ad litora torquent 
    per conubia nostra, per inceptos himenaeos. Sed sit amet velit at purus elementum 
    dapibus. Nulla dapibus auctor vulputate. Sed cursus nisi at mauris mollis semper. 
    Vestibulum consectetur cursus dui sit amet pretium. 
</p> 
<img src="images/coffee2.png" class="imgRight"/> 
<h3>Title 2</h3> 

<p> 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
    himenaeos. Donec porttitor placerat nunc a consectetur. Ut fermentum eleifend molestie. 
    Donec fermentum risus sit amet ante cursus cursus. In hac habitasse platea dictumst. 
    Praesent semper ante ut felis molestie aliquet. Nam quis dui a magna molestie blandit 
    id et justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
    per inceptos himenaeos. Sed felis mauris, mattis a vulputate a, gravida nec metus. 
    Vivamus elit augue, ullamcorper eget scelerisque vitae, tincidunt eget lorem. Curabitur 
    id nibh libero, sed pulvinar nisi. Curabitur ultrices, neque in dignissim viverra, 
    justo nisl dignissim magna, a tempor eros turpis in diam. Suspendisse potenti. Sed 
    tincidunt est ac elit bibendum nec varius ante vestibulum. 
</p> 

<img src="images/coffee3.png" class="imgLeft" /> 
<h3>Title 3</h3> 
<p> 
    In hac habitasse platea dictumst. In purus leo, consequat nec porta a, varius sed 
    dui. Nulla placerat mollis tincidunt. Praesent at elit mi, a posuere quam. Suspendisse 
    vel leo eu orci lacinia vestibulum. Fusce vel sem fermentum lectus tempus ultrices. 
    Morbi arcu sem, rhoncus sit amet rutrum eget, interdum sit amet leo. Ut mattis lorem 
    vitae dolor tincidunt mattis a lacinia velit. Cras sed nibh at urna imperdiet laoreet 
    quis a risus. 
</p>'; 

include 'content.php'; 
include 'footer-distributed-with-contact-form.php'; 
?>

content.css

body 
{ 
    font-family: lucida grande ,tahoma,verdana,arial,sans-serif; 
    background-color: #e9e9e9; 
} 

body p 
{ 
    font-size: 0.8em; /*0.8 previous */ 
    line-height: 1.28; 
} 

/*#wrapper 
{ 
    width: 1080px; 
    background-color: white; 
    margin: 0 auto; 
    padding: 10px; 
    border: 5px solid #dedede; 
}*/ 

#content_area 
{ 
    float: center; /* old left */ 
    text-align: justify; 
    font-size: 2.2em; /* new line */ 
    width: 1080px; /*new line added*/ 
/* width: 750px; previous */ 

    margin: 20px 0 20px 0;  
    margin: 0 auto; /* New line added */ 
    padding: 10px; 
} 

.imgLeft 
{ 
    float: left; 
    width: 240px; 
    height: 150px; 
    margin: 0px 10px 10px 0; 
    padding: 10px; 
} 

.imgRight 
{ 
    float: right; 
    width: 200px; 
    height: 250px; 
    margin: 0px 0 10px 10px; 
    padding: 10px; 
}

来源

2017-08-22 yesganesh

你能提供一个工作小提琴？ – Huelfe

同意上述或网站所在的工作网址。 –

http://responsive.kkits.in/index.php – yesganesh

你content_area被设置为一个固定的宽度（1080px）如果你只是想使它响应，给它一个1080px最大宽度为100％的宽度。

#content_area { 
    float: center; 
    text-align: justify; 
    font-size: 2.2em; 
    max-width: 1080px; 
    width: 100%; 
    margin: 20px 0 20px 0; 
    margin: 0 auto; 
    padding: 10px; 
}

它仍然不漂亮，但响应;-)

来源

2017-08-22 06:39:30 toffler

多数民众赞成在罚款。但为什么Title1和Title3。数字1和数字3下降。 – yesganesh

@yesganesh 您可以处理它以同样的方式：给.imgLeft类的320x240像素一个最大宽度，宽度50％和高度自动...这样的： .imgLeft { 浮动：左; max-width：240px; 宽度：50％; 身高：自动; margin：0px 10px 10px 0; padding：10px; } 但我真的会推荐你使用像引导常用样式的框架。 :-) – toffler

您还可以使用媒体查询，让您的容器适应性：

@media screen and (min-width: 1180px) { 
    /* Code your specific rules for this definition */ 
} 
@media screen... { 
    /* Other stuff for other definition */ 
}

来源

2017-08-22 06:43:00

内容在移动设备上无法响应

回答

相关问题