在浏览器中工作的媒体查询调整大小不在移动版

时间：2015-07-16 14:19:48

标签： html css mobile responsive-design media-queries

我尝试为小型浏览器和移动设备创建固定图像效果。这是页面：http://www.minecraftserverland.com/elpatron/index.php 在将浏览器中的页面大小调整为小于768px时，效果非常有效。然而，在移动设备上，它看起来完全不同。为什么会这样？

这是相关的HTML 

<div class="divspecial" style="margin-left: auto; margin-right: auto;">
<img src = "img/patron2.jpg"  class="imgfiller"/>
</div>

这就是CSS 

    @media(min-width: 1450px){  
        .imgfiller {    
            width: 100%;
        }


        .divspecial {
            width: 75%;
            left: 12.5%
        }
    }

    @media(max-width: 1449px){
        .imgfiller {
            width: 100%;
        }

        .divspecial {
            width: 95%;
            left: 2.5%
        }
    }

    @media(max-width: 767px){

        .imgfiller {
            visibility: hidden; 
            width: 100%;
        }

        .divspecial {
            background: url("img/patron2.jpg") no-repeat top center fixed;
            background-size: 100%;
            background-position: 0 60px;
            width: 100%;
        }
    }

    @media (max-width: 500px){
        .divspecial {
            background: url("img/patron2.jpg") no-repeat top center fixed;
            background-size: 100%;
            background-position: 0 60px;
            width: 100%;
        }
        .imgfiller {
            visibility: hidden; 
            width: 100%;
        }

    }

非常感谢任何帮助，谢谢！

编辑：我刚刚注意到，在移动设备上，页面的加载速度确实非常慢。我不确定为什么会这样，因为它在浏览器上加载速度很快，而网站上的其他页面也会在移动设备上快速加载。另外，有人希望我发布我的整个代码，所以这里是：

主页：

<?php
include("init.php");
include("inc/header.php");
?>
<style>
.frontheader {
float: left;
color: black;
padding-left: 0;
padding-top: 20px;
margin-bottom: 0px;
}

.frontheader5 {
float: left;
color: black;
padding-left: 0;
padding-top: 7px;
}
    @media(min-width: 768px){
        .eventrow {
                padding-left: 15px;
            }
    }

@media(max-width: 767px){
        .eventrow {
                padding-left: 30px;
            }
    .sectionhome {
        padding-top: 10px;
    }

    }

</style>
<div class="divspecial" style="margin-left: auto; margin-right: auto;">
<img src = "img/patron2.jpg"  class="imgfiller"/>
</div>

<!--<img src = "img/patron2.jpg" class="bigimg" style="margin-left: auto;      margin-right: auto; display: block; visibility:hidden;"/>
<img src = "img/patron2.jpg" class="bigimg" style="margin-left: auto; margin-    right: auto; display: block; position: fixed; left: 12.5%; top: 60px;"/>-->
<!-- Header -->
<header>

</header>

<!-- Portfolio Grid Section -->
<section id="portfolio" class="sectionhome">
    <div class="container bigimg" style="padding-left: 0; padding-right: 0;">
        <div class="col-lg-12"> 
        <a href="collection.php">
        <h3 class="frontheader">
            Collection
        </h3>
        </a>
            <a href="collection.php"><h5 class="frontheader5" style="float: right; margin-bottom: 5px; margin-top: 40px;">
                Full Collection
                </h5></a>
        </div>
        <div class="col-lg-4 mobilecol" style="padding-left: 0px;">
            <a href="collection.php">
            <img src="img/patronproduct1.jpg" style="width: 100%;"/>
            </a>
            <a href="collection.php"><h5 style="color: black;">
                Talc Products
                </h5></a>
        </div>

        <div class="col-lg-4 mobilecol" style="padding-left: 7.5px; padding-right: 7.5px;">
            <a href="collection.php">
            <img src="img/patronoil.jpg" style="width: 100%;"/>
            </a>
            <a href="collection.php"><h5 style="color: black;">
                Styling Gel Products
                </h5></a>
        </div>

        <div class="col-lg-4 mobilecol" style="padding-right: 0px;">
            <a href="collection.php">
            <img src="img/patronproduct3.jpg" style="width: 100%;"/>
            </a>
            <a href="collection.php"><h5 style="color: black;">
                Pomade Products
                </h5></a>
        </div>


        <div class="col-lg-12"> 
        <a href="lifestyle.php">
        <h3 class="frontheader">
            Lifestyle
        </h3>
        </a>
            <a href="lifestyle.php"><h5 class="frontheader5" style="float: right; margin-bottom: 5px; margin-top: 40px;">
                View All Posts
                </h5></a>
        </div>
        <div class="col-lg-4 mobilecol" style="padding-left: 0px;">

            <a href="lifestyle.php"><img src="img/modern1.jpg" style="width: 100%;"/></a>
            <a href="lifestyle.php"><h5 style="color: black;">
                Modern Salon Shoot Part Three
                </h5></a>
        </div>

        <div class="col-lg-4 mobilecol" style="padding-left: 7.5px; padding-right: 7.5px;">
            <a href="lifestyle.php#readmore1"><img src="img/modern2.jpg" style="width: 100%;"/></a>
            <a href="lifestyle.php#readmore1"><h5 style="color: black;">
                Modern Salon Shoot Part Two
                </h5></a>
        </div>

        <div class="col-lg-4 mobilecol" style="padding-right: 0px;">
            <a href="lifestyle.php#readmore2"><img src="img/modern4.jpg" style="width: 100%;"/></a>
            <a href="lifestyle.php#readmore2"><h5 style="color: black;">
                Modern Salon Shoot Part One
                </h5></a>
        </div>

        <div class="col-lg-12"> 
        <h3 class="frontheader">
            Grooming Tips
        </h3>
            <a href="#"><h5 class="frontheader5" style="float: right; margin-bottom: 5px; margin-top: 40px;">
                View All Tips
                </h5></a>
        </div>
        <div class="col-lg-4 mobilecol" style="padding-left: 0px;">

            <img src="img/patrontips2.jpg" style="width: 100%;"/>
            <a href="#"><h5 style="color: black;">
                Placeholder Title
                </h5></a>
        </div>

        <div class="col-lg-4 mobilecol" style="padding-left: 7.5px; padding-right: 7.5px;">
            <img src="img/patrontips1.jpg" style="width: 100%;"/>
            <a href="#"><h5 style="color: black;">
                Placeholder Title
                </h5></a>
        </div>

        <div class="col-lg-4 mobilecol" style="padding-right: 0px;">
            <img src="img/patrontips3.jpg" style="width: 100%;"/>
            <a href="#"><h5 style="color: black;">
                Placeholder Title
                </h5></a>
        </div>

        <div class="row" style="padding-left: 35px; padding-right: 40px;">  
        <h3 class="frontheader">
            Events
        </h3>
            <a href="#"><h5 class="frontheader5" style="float: right; margin-bottom: 5px; margin-top: 40px;">
                View All Events
                </h5></a>
        </div>
        <div class="row eventrow" style=" padding-right: 15px;">
        <div class="col-xs-4 col-lg-2 events" style="padding-left: 0px;">

            <img src="img/patronorlando.jpg" style="width: 100%;"/>
        </div>
        <div class="col-xs-4 col-lg-2 events" style="padding-left: 0px;">

            <img src="img/patronorlando2.jpg" style="width: 100%;"/>
        </div>
        <div class="col-xs-4 col-lg-2 events" style="padding-left: 0px;">

            <img src="img/patronorlando.jpg" style="width: 100%;"/>
        </div>

        </div>

    </div>
</section>



<?php
include("inc/footer.php");
?>

部首：

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0"     />-->
<meta name="description" content="">
<meta name="author" content="">

<title>
    <?php if($page == "lifestyle") {
        echo "Lifestyle - El Patron";
    } else if($page == "collection"){
        echo "Collection - El Patron";
    } else if($page == "professional"){
        echo "Professional - El Patron";
    } else {
        echo "El Patron - Home";
    }
    ?>


</title>

<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme:  http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css"> 
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"   type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries  -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">   </script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">  </script>
<![endif]-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="js/unslider.js"></script>

</head>

<body id="page-top" class="index">

<style>
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; background-color: white; padding: 0px;}
    .banner ul li { float: left; }
    .navbar-brand {
        padding-top: 20px;
    }

    .navbar-right {
        padding-top: 20px;
    /*  float: left !important;*/
    }


    .darkheader {
        color: #2c3e50;
    }

    @media (min-width: 1450px){
        .navbar-default {
             width: 80%;
             left: 10%;
        }

        .footercontainer {
             width: 80%;
            left: 10%;
        }

        .imgfiller {

        width: 100%;

    }

        .bigimg {
            width: 75%; 
        }

        .mainheader {
            color: black;
            font-size: 3.0em;
        }
        .divspecial {
        width: 75%;
            left: 12.5%
    }
    }
    @media (max-width: 1449px){
        .navbar-default {
             width: 100%;
             left: 0;
        }
        .footercontainer {
             width: 100%;

        }
        .bigimg {
            width: 95%; 
        }
        .imgfiller {

        width: 100%;

    }
        .mainheader {
            color: black;
            font-size: 2.9em;
        }
        .divspecial {
        width: 95%;
            left: 2.5%
    }
    }
    @media (max-width: 767px){


        .bigimg {
            width: 100%; 
        }

        .mobilecol {
            padding-right: 0 !important;
            padding-left: 0 !important;
        }

        .frontheader {
            font-size: 22px;
        }
        .frontheader5 {
            font-size: 10px;
        }

        .footerheader {
            font-size: 22px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .footertext {
            font-size: 15px;
        }
        .imgfiller {
        visibility: hidden; 
        width: 100%;

    }
        .blackbackground {
            background-color: black;
        }

        .mainheader {
            color: black;
            font-size: 2.5em;
        }
        .divspecial {
        background: url("img/patron2.jpg") no-repeat top center fixed;
background-size: 100%;
    background-position: 0 60px;
            width: 100%;
    }
    }

    @media (max-width: 500px){

        .divspecial {
        background: url("img/patron2.jpg") no-repeat top center fixed;
background-size: 100%;
    background-position: 0 60px;
            width: 100%;
    }
        .imgfiller {
        visibility: hidden; 
        width: 100%;

    }
        .mainheader {
            color: black;
            font-size: 2.2em;
        }
    }


    @media (min-width: 768px) {

        .navselected {
            border-bottom-style: solid;
            border-bottom: thick solid white;

        }

    }
        hr.dark {
            border: 0;
            height: 1px;
            background: #333;
            background-image: linear-gradient(to right, #ccc, #333, #ccc);
        }

        .footera {
            margin-top: 0px;
        }

</style>
<!-- Navigation -->
<nav class="navbar navbar-default" style="margin-bottom: 0px;margin-right:  auto; margin-left: auto; height: 60px; position: fixed; z-index: 10000; top: 0px;">
    <div class="container" style="height: 100px">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.php" style="padding-top: 3px;"><img style="height: 54px;"src="img/elpatronlogo.png"/></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse blackbackground" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right" style="padding-top: 5px;">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll <?php if($page == "collection") {echo "navselected";} ?> ">
                    <a href="collection.php">Collection</a>
                </li>
                <li class="page-scroll <?php if($page == "lifestyle") {echo "navselected";} ?> ">
                    <a href="lifestyle.php">Lifestyle</a>
                </li>
                <li class="page-scroll <?php if($page == "education") {echo "navselected";} ?> ">
                    <a href="#">Education</a>
                </li>
                <li class="page-scroll <?php if($page == "professional") {echo "navselected";} ?> ">
                    <a href="professional.php">Professional</a>
                </li>


            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<div style="width: 100%; height: 60px;">

</div>

1 个答案:

答案 0 :(得分：1)

尝试在$("span.topmiddiv").html(); 之后和@media

之前添加空格

编写媒体查询时，无效：

(

注意@media screen and(max-width: 767px){ p { color: blue } } - 没有空格。

但是这样的会起作用：

and(

请注意@media screen and (max-width: 767px) { p { color: blue } } - 空格存在。

根据您当前的代码，这是我最好的猜测，因为一切看起来都正确，并且包含了所有依赖项，例如所需的元标记。

相关问题
最新问题