內容在移動設備上無法響應

在移動設備上查看時，我的網頁的頁眉和頁腳是響應式的，但內容不是。使用的文件是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

內容在移動設備上無法響應

回答

相關問題