Question

几天前，我完成了第一个网站的编辑。 CSS可以在台式机和移动设备上正确显示，但是我注意到当我尝试修改CSS使其显示在手机的浏览器中时，它并不会占用我的设置。我谨记，浏览器工具和Blisk应用程序会获取我的设置并正确显示CSS代码，但是当我通过手机访问该网站时，它不会更改设置。

我将放下两张图片，看看它如何在Blisk应用程序上显示我以及如何在手机上显示我。

Blisk应用程序：

Blisk App

电话视图：

Phone View

 @media only screen and (max-width: 360px) {
     header {
        height: 60px;

     }
    header img {
    display: none;
 }



nav ul {

    margin-right: 15px;
    margin-top: 20px;

}



nav ul li {
    display: inline-block;
    margin-left: 7px;

}


nav ul li a {
    font-size: 14px;

}
  .livada {
    width: 350px;
    height: 250px;

  }


.container {
     width: 300px;

}
.sectiune_text h2 {
    text-align: center;
    font-size: 40px;
    font-family: font1;

 }
 .sectiune_text p {
    text-align: center;
    font-size: 17px;
 }


/* DESPRE */


 .sectiune_text_2 img {
    display: none;
            }


            .container2{
                width: 300px;
                margin:auto;
            }

    .sectiune_text_2 h2 {
        font-size: 40px;
        font-family: font1;
        text-align: center;

    }


    .sectiune_text_2 p {

        font-size: 15px;
        text-align: center;
    }

    .fructe2 img{

        display: none;
    }

    .container1 {
        width: 300px;
        margin-top: 10px;
        margin: auto;   }
    .p2 h2 {
        text-align: center;
        font-size: 40px;
        font-family: font1;
    }
    .p2 p {
        text-align: center;
        font-size: 15px;
    }
    .footer footer {
    width: 100%;
    background-color: #222;
    padding: 30px 0px;
    margin-top: 30px;}

    .footer footer h1 {
        font-size: 13px;
    }

    /* GALERIE */

    .galerie {
        margin: 10px 10px;
    }

    .galerie img {
        transition: 1s;
        padding: 5px;
        width: 330px;

    }
    .galerie img:hover {
        transform: scale(1.1);
    }



    /* CONTACT */


        #map {
    height: 500px;
    width: 350px;
    margin: auto;

        }

 .adresa img {
    width: 30px;
    height: 40px;
    margin-left: 100px;
    float: left;

 }

.adresa h2 {
    float: left;
    font-size: 30px;
    margin-left: 20px;
    margin-top: 5px;
    font-family: Times New Roman;
}
 .adresa p {
    margin-left: 70px; 
    font-size: 20px;
    float: none;
    margin-top: 0px;

 }


 .telefon img {
    width: 40px;
    height: 40px;
    margin-left: 90px;
    float: left;

 }
 .telefon h2 {
    float: left;
    font-size: 30px;
    margin-left: 20px;
    margin-top: 3px;
    font-family: Times New Roman;
}
 .telefon p {
    margin-left: 55px;
    font-size: 20px;
    float: none;
    margin-top: 0px;

    }
 .email img {
    width: 40px;
    height: 40px;
    margin-left: 90px;
    float: left;}


    .email h2 {
    float: left;
    font-size: 30px;
    margin-left: 20px;
    margin-top: 3px;
    font-family: Times New Roman;
}
 .email p {
    margin-left: 65px;
    font-size: 20px;
    float: none;

 }
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Grande Bucovina - CONTACT</title>
        <link rel="stylesheet" href="css/style.css">
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <style>
            *{
    margin: 0;
    padding: 0;

        }


        </style>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <body bgcolor="#ebebe0">
        <header>
            <img src="images/logo.png" alt="logo site">

            <nav>
                <ul>
                <li><a href="index.html" ><i class="fa fa-home"></i> ACASĂ</a></li>
                    <li><a href="despre.html"><i class="fa fa-info"></i> DESPRE</a></li>
                    <li><a href="galerie.html"><i class="fa fa-image"></i>  GALERIE</a></li>
                    <li><a href="contact.html" style="font-weight: bold;"><i class="fa fa-envelope" ></i>  CONTACT</a></li>
                </ul>
            </nav>

        </header>

        <div id="map"></div>

        <script>

            function initMap() {
                var location = {lat:47.680870, lng:26.266649};
                var map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 4,
                    center: location
                });
                var marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
            }

        </script>
          <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSw822pwdiQ09FK5h517ZrtTQa5mp3gx4&callback=initMap"
  type="text/javascript"></script>
  <br><br><br><br>
        <div class="adresa">
            <img src="images/locatie.png" alt="locatie">
            <h2>Adresa :</h2>
            <br><br><br>
            <p>Jud. Suceava, cartier Burdujeni, strada Aleea Dumbrăvii, nr 33</p>
        </div>
        <br><br>
        <div class="telefon">
            <img src="images/telefon.png" alt="numar telefon">
            <h2>Telefon :</h2>
            <br><br><br>
            <p>Rotaru Sebastian - 0746547737</p>
        </div>
        <br><br>

        <div class="email">
            <img src="images/email.png" alt="email">
            <h2>Email : </h2>
            <br><br><br>
            <p>rotaruseba.80@gmail.com</p> 
        </div>
            <footer>

    <h1><u>COPYRIGHT &copy; S.C GRANDE BUCOVINA S.R.L</u></h1>

    </footer>

    </body>
</html>

This is my site

媒体查询无法在手机上正确显示

0 个答案: