更改为响应式站点

时间：2015-06-12 05:45:18

标签： php html css responsive-design responsiveness

我在我的网站上使用了宽度和高度，如

 <table  width="800px"  height="600px" border="0" cellspacing="0" cellpadding="0" class="leftborder"/>

我必须更改此代码媒体查询的响应，但它不起作用我设置背景颜色红色当我调整我的浏览器的显示颜色而不是调整大小内容

enter image description here

我的代码：

<style type="text/css">

  @media only screen and (min-width: 320px) and (max-width : 780px)
       {
           .leftborder
           {
               background-color:skyblue;
           }


.rightborder { 
border-right: 1px solid #000000; 
} 

.leftborder { 
border-left: 1px solid #000000; 
border-right: 1px solid #000000; 
border-bottom: 1px solid #000000; 

border-style: thin; 
} 


.style2 {font-size: xx-small}

.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
} 


BODY { font-family: Arial, Helvetica, sans-serif;
    line-height:160%;
    font-size:14px;
    color:#000;
    background: url(images/gradient2.jpg);
    background-repeat: repeat-x; 
    background-color:#FFF; 
}       


table.leftborder{

    align:"right";
    width:800px ! Important;
    height:600px ! Important;

}

            }



/* MOBILE LANDSCAPE */
       @media only screen and (min-width: 480px) and (max-width: 780px)
       {
.leftborder        {
               background-color:blue;
           }

}



/* SMALL TABLET */
       @media only screen and (min-width: 600px) and (max-width:780px)
       {
           .leftborder
           {
               background-color:green;
           }

       }



/* TABLET/NETBOOK */
       @media only screen and (min-width: 768px) and (max-width: 780px)
       {
           .leftborder
           {
               background-color:yellow;
           }

}



.rightborder { 
border-right: 1px solid #000000; 
} 

.leftborder { 
border-left: 1px solid #000000; 
border-right: 1px solid #000000; 
border-bottom: 1px solid #000000; 

border-style: thin; 
} 


.style2 {font-size: xx-small}

.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
} 


BODY { font-family: Arial, Helvetica, sans-serif;
    line-height:160%;
    font-size:14px;
    color:#000;
    background: url(images/gradient2.jpg);
    background-repeat: repeat-x; 
    background-color:#FFF; 
}       




</style>
<script type="text/javascript">
function openWindow(winName)
{
    window.open(winName,"FAQs", "width=950,height=650,resizable=no,scrollbars=no,toolbar=no,status=no,menubar=no,copyhistory=no,left=100,top=100,screenX=100,location=no,screenY=100");
}
</script>
</head>

<link href="style.css" rel="stylesheet" type="text/css">

<body bgcolor="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">

<table  width="100%" border="0" cellspacing="0" cellpadding="0" class="design"/ >
   <tr>
       <td align="center">
         <table  width="800px"  height="600px" border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
              <tr bgcolor="#FFFFFF">

              <td colspan="2"  style="background-image:url('site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right" />

              <?php
              if(!is_null($sid)&&$session_error=="none")
              {
                    $_SESSION['lms_username']=$lms_username;
                    ?><TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="190" >
                    <TR>
                        <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000">Logged in as: <B><?php echo $lms_username; ?></B></TD>
                    </TR>
                        <?php
                        if($lms_groups=="on" && $lms_user_group!=""){
                        ?>
                        <TR>
                            <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo"$lms_gtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_group</B>";}?></TD>        
                        </TR>   
                        <TR>
                            <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo "$lms_sgtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_subgroup</B>";}?></TD>

                        </TR>   
                        <tr>
                            <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php if($section=="reports" && $report){echo"<A HREF='index.php?section=reports&sid=$sid'>Back to Detailed Reports Section";}?></FONT></TD>
                        </tr>
                        <?php }?>

                    </TABLE>
                    <?php   
               }
              ?></td>
              </tr>
              <tr>
                  <td colspan="2" height="20" background="images/bg.gif">
                      <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
                         <tr>
                            <td>&nbsp;</td>
                            <TD align="right"><?php
                if(!is_null($sid)&&$session_error=="none")
                {
                ?><a style=""  href="index.php?section=<?php echo $section; ?>&logout=YES&sid=<?php echo $sid; ?>"><img src="images/logout.gif" border="0" align="ABSMIDDLE" alt="Click here to Log Out"></a><?php
                }
                ?></TD>
                        </tr>
                    </table></td>
              </tr>
             <tr>
                <?php
                if(is_null($sid)||$session_error!="none")
                {
                    $nav_display = 'display: none';
                }
                ?>
                <td valign="top" style=" <?php echo $nav_display; ?> ">
                <!---------BEGIN SIDE NAV TABLE------------->
                <table width="198" border="0" cellspacing="0" cellpadding="0" >
                  <tr valign="top" bordercolor="#FFFFFF"> 
                     <td width="198" bordercolor="#FFFFFF"><?php          
                     if((!is_null($sid)&&$session_error=="none"))
                     {
                        include($dir_components."navbar2.php");

                     }
                     ?></td>
                </tr>
                <tr><td>&nbsp;</td></tr>
                <tr>
                <td></td>
            </tr>
      </table>
    </td>
    <td class="boxcontent" VALIGN="TOP" >
    <?php 

    include($mysection);
    ?></td>
  </tr>
</table>
</td>
</tr>
</table>
<hr width="200;">
</body>
</html>

添加图片我得到了什么？请帮我任何建议吗？

1 个答案:

答案 0 :(得分：0)

在您的媒体查询中，您刚刚更改了颜色，您应该如何获得响应式设计。您需要更改其他属性，例如width或height，以调整相应的屏幕尺寸。或者还有其他选项，如响应式表格插件，或者如果您想通过媒体查询进行修复，则需要首先决定如何在特定屏幕尺寸上显示，选项如可滚动表格或将表格标题分成下面的块和列等等，然后只进入媒体查询进行相应的调整。

相关问题
最新问题