Question

好的，所以我试图通过将px转换为vw来使我的网站更具移动性。我知道1vw将是19.2px，以便我如何完成转换。现在，问题是如果我从本地的html页面打开页面，它工作正常。如果我将它放在Web服务器上，最后一个图标将出现在整个屏幕上。发生了什么？有人可以帮我解决吗？

HTML

＆＃13;

<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>x</title>
    <link href="css/css.css" rel="stylesheet" />
    <link href="css/sshow.css" rel="stylesheet" /> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
    <div id="container">
        <div class="shadow">
            <header id="top">
                <nav id="top-mic">
                    <ul>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Despre noi</a></li>
                        <li><a href="#">Locatie</a></li>
                    </ul>
                </nav>
                <a href="#"><img src="img/logo.jpg" alt="x" id="logo"></img></a>
                <div id="top-mare-wrap">
                    <nav id="top-mare">
                        <ul>
                            <li><a href="#">Acasa</a></li>
                            <li><a href="#">Buton1</a></li>
                            <li><a href="#">Buton2</a></li>
                            <li><a href="#">Buton3</a></li>
                            <li><a href="#">Buton4</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
        </div>
        <div class="slideshow-container">

            <div class="mySlides fade">
                <div class="numbertext">1 / 3</div>
                <img src="img/img1.jpg" style="width:100%">
            </div>

            <div class="mySlides fade">
                <div class="numbertext">2 / 3</div>
                <img src="img/img2.jpg" style="width:100%">
            </div>

            <div class="mySlides fade">
                <div class="numbertext">3 / 3</div>
                <img src="img/img3.jpg" style="width:100%">
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
            <script src="js/sshow.js"></script> 

            <button onclick="topFunction()" id="myBtn" title="Inapoi la inceputul paginii"><img src="img/arrow-up-01-128.jpg"/></button>
            <script src="js/myBtn.js"></script>
            <footer class="footer">
                <ul>
                    <li id="nume">x</li>
                    <li><img src="img/location_1.png" class="location"/> x</li>
                    <li><img src="img/phone.jpg" class="phone"/>x</li>
                    <li><img src="img/mail.jpg" id="mail"/>x</li>
                    <li class="copyright">Copyright Ⓒ 2017</li>
                </ul>
            </footer>     
</div>
</body>
</html>

＆＃13;

CSS

＆＃13;

html {
    box-sizing: border-box;
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: Roboto, Arial;
    height: auto;
    width: 100%;
	padding: 0;
    padding-bottom: 6rem;
    margin: 0;
    font-size: 1.1em;
    min-height: 100%;
    position: relative;
}

header {
    color: #ffffff;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ADADAD;
}

#container {
    margin: 0 auto;
    padding: 0;
    color: #ffffff;
}

#top-mic {
    background-color: #F28A00;
    margin: 0;
    padding: 0;
    margin-bottom: 0.73vw;
}

#top-mic ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
}

#top-mic li {
        float: right;
        padding: 8px 30px;
}

#top-mic li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        text-align: center;
        font-size: 0.6em;
        font-weight: bold;
        transition: color 0.25s ease;
        margin-right: 55px;
}

#top-mic li a:hover {
    color: #ADADAD;
}

#logo {
    float: left;
    margin-left: 12.5vw;
    margin-right: 6.77vw;
    width:15vw;
    height: 5.989vw;
}

#top-mare-wrap {
    margin: 0 auto;
}

#top-mare {
    padding: 0;
    margin: 0;
    margin-bottom:3.125vw;
}

#top-mare ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#top-mare li {
    display:inline;
}

#top-mare li a {
        margin-top: 2.1875vw;
        margin-left: 2.083vw;
        padding-right: 1.041vw;
        display: inline-block;
        text-decoration: none;
        color: #ADADAD;
        text-align: center;
        font-size: 2.1em;
        font-weight: bold;
        transition: color 0.25s ease;
}

#top-mare li a:hover {
        color: #F28A00;
}

#test {
    color:black;
}

.footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #F28A00;
}

.footer ul {
        list-style-type: none;
        margin: 0;
        padding: 1.041vw;     
}

.footer li { 
        font-size: 0.9em;
        font-weight:bold;
        display: inline;
        margin-left: 2.604vw;
        padding-right: 0.78125vw;
        padding-bottom: 0.263vw;
}

.copyright {
    float:right;
}

#nume {
    font-weight: italic;
}

#myBtn {
    display: none; 
    position: fixed; 
    bottom: 3.646vw; 
    left: 3.125vw; 
    z-index: 99; 
    border: none; 
    outline: none;
    background-color: #F28A00; 
    color: white; 
    cursor: pointer; 
    padding: 0.78125vw;
    border-radius: 10px; 
    width: 3.33333vw;
    height: 3.3333vw;
}

.location {
    width: 0.677vw;
    height: 0.677vw;
}

.phone {
    width: 0.677vw;
    height: 0.677vw;
}

#mail {
    height: 0.677vw;
    width: 0.9375vw;
}

＆＃13;

大众单位和小图标显示在整个页面上

0 个答案: