仅限CSS媒体屏幕问题

Question

我们的代码中有一些图片。我在下面粘贴的代码是我们用来解决平板电脑兼容性问题的代码。但是平板电脑上的图像看起来很大。在手机上，图像看起来很好。

CSS：

/* #Tablet (Portrait) */

@media only screen and (min-width: 571px) and (max-width: 768px) {

    /* COMMON */
    .mobile {height: 35px; display: block;}
    #hide_20px {display: block;}

    /* DIV */
    #wrap {max-width:100%;}

    /* BUTTONS */
    .button_img {width: auto; height: auto;}

    /* HEADER */
    #pex_logo{max-width: 100%; margin-left: 30px;}


    /* NAV */
    nav {position: absolute; top: 0px; left: 0px; background-image: none; background: #F2F2F2; height: auto; border-radius: 0px; width: 100%; border: none;}
    nav ul {width: 100%; display: none; height: auto;}
    nav li {padding: 0px; width: 33%; float: left; position: relative;}
    nav li a {color: #666; border-bottom: 1px solid #666; border-right: 1px solid #666}
    nav li:first-child a{margin-left: 0px;}
    nav a {color: #FFF; padding: 0px; text-align: left; width: 100%; text-indent: 20px; line-height: 30px; background: none;}
    nav li:last-child a {border-right: 1px solid #666;}
    nav a:hover {color: #FFF; background: #999;}
    nav li:last-child a:hover  {color: #FFF; background: #999;}
    nav .current a {font-weight: bold; color: #000; background: none;}
    #gap {display:block; width:20px; float: left}
    .slide-trigger { display: block;  }
    .navigation { display: none; }

    /* PEX CONTENT LEFT */
    #pex_content_left {max-width: 100%; width: 100%; float: none;}

    /* PEX CONTENT RIGHT */
    #pex_content_right_down {display:none;}
    #pex_content_right { max-width: 100%; width: 100%; float: none;}
    #pex_content_right aside {width: 100%; float: right; border-right: 1px dotted #999; border-bottom: 1px dotted #999; padding-bottom: 0px; padding: 5px;}

    /* PEX FOOTER */
    footer {max-width: 96%;}
    footer p {line-height:normal; padding: 5px; padding-left: 0px;}
    footer ul {margin: 0px; padding: 0px; display: block; width: 100%; float: left;}
    footer ul li {}
}

HTML：

<!--Mobile-->

<div id="pex_content_right_down" class="clearfix">
    <!-- START 'pex_content_right' -->
    <aside>
        <div id="pex_content_right_header">Text</div>
        <div id="pex_content_right_content">
            <center>
                <img src="ipad-img.jpg" alt=""  border="0"/>
            </center>
            <br>

            <img src="reg-button.png" border="0"></a>
        </div>
    </aside>
    <aside>
        <div id="pex_content_right_header">Refer</div>
        <div id="pex_content_right_content">
            <center>
                <img src="laptop-speaker.jpg" alt=""  border="0"/>
            </center>
            <br>

            <img src="green-button.png" border="0"></a>
        </div>
    </aside>
    <aside>
        <div id="pex_content_right_header">Details</div>
        <div id="pex_content_right_content"> 


        </div>
    </aside>
</div>

<!--Mobile End -->