Question

您正在使用2个媒体查询，但在平板电脑或手机上查看它们似乎无法正常工作，原始css仍显示覆盖。我希望在平板电脑和手机视图下使用2个方块，而不是在桌面视图上并排显示内嵌

原始

.site-logo {
    float:left;
    display:inline-block;
    width: 60%;
    vertical-align: top;
}
img.logo {
    height:auto; 
    width:auto; 
}
.header-search { 
    float:right;
    display:inline-block;
    width: 40%; 
    vertical-align: top;
    margin-top:2%;
}

媒体

/* Tablet */
@media only screen and (min-width: 768px) {
    .site-logo {
        display:block;
        width: 100%;
        margin: 0 auto;
    }
    img.logo 
    {
        height:auto; 
        width:auto;
        margin: 0 auto; 
    }
    .header-search 
    { 
        display:block;
        width: 100%;
        margin: 0 auto;
    }
}

/* Mobile  */
@media only screen and (min-device-width: 480px) {
    .site-logo 
    {
        display:block;
        width: 100%;
        margin: 0 auto;
    }
    img.logo 
    {
        height:auto; 
        width:auto;
        margin: 0 auto; 
    }
    .header-search { 
        display:block;
        width: 100%;
        margin: 0 auto;
    }
}

指向网站的链接：Photohunters

谢谢梅拉妮

更新

再次尝试但没有去！

.site-logo {
    float:left;
    display:inline-block;
    width: 60%;
    vertical-align: top;
}

img.logo {
    height:auto; 
    width:auto; 
}

.header-search { 
    float:right;
    display:inline-block;
    width: 40%; 
    vertical-align: top;
    margin-top:2%;
}
/* Tablet */
@media only screen and (min-width: 720px) and (max-width: 800px) {
}

/* Mobile  */
@media only screen and (min-width: 480px) and (max-width: 719px) {
    #sidebar { display:none; }
    #sidebar-profile { display:none; }
    #site-content-left {
        width: 95%;
        margin:0 auto;
    }
    .site-logo {
        display:block;
        width: 100%;
        margin: 0 auto;
    }
    img.logo 
    {
        height:auto;
        width:auto; 
        margin: 0 auto; 
    }
    .header-search { 
        display:block;
        width: 100%;
        margin: 0 auto;
    }
}
/* Mobile - 320px */
@media only screen and (min-width: 300px) and  (max-width: 479px) {
    #sidebar {display:none;}
    #sidebar-profile {display:none;}
    #site-content-left {
        width: 95%;
        margin:0 auto;
    }
    .site-logo 
    {
        display:block;
        width: 100%;
        margin: 0 auto;
    }
    img.logo 
    {
        height:auto; width:auto; margin: 0 auto; 
    }
    .header-search 
    { 
        display:block;
        width: 100%;
        margin: 0 auto;
    }
}

按要求提供的HTML

`<meta name="viewport" content="width=device-width" />
<div id="wrap">
    <div class="site-logo"> <a href="<?php echo get_option('home'); ?>"><img  class="logo" src="<?php echo get_stylesheet_directory_uri(); ? >/images/logobestnewstreight300.png" alt="photohunters.org" /></a></div>
    <div class="header-search">
   <?php if (is_page('home')) { ?>
    <div class="fb-share-button" data-layout="button"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href=" <?php echo get_permalink(); ?>" layout="button_count" show_faces="false" ></fb:like></div><?php } ?>

   <div class="headersearchbox"> 
   <?php $results_page = site_url().'/search-results/'; ?>
<form name="search" method="post" action="<?php echo $results_page; ?>">

`

平板电脑和手机的媒体查询

更新

0 个答案: