Question

之前我问过这个问题，但它太混乱了，我也无法澄清它。我修复了我的网站，现在正在测试，以使我的响应式网站在不同的移动平台上运行。但是，当在Android手机上打开网站时，一切都崩溃了。对于响应式设计，我使用外部文件并将其链接到这样的html。

这是网站http://www.sfu.ca/~nnabeel使用移动设备打开网站。

<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:786px)" href="medium-style.css" /> <!--Tablet-->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="small-style.css" /> <!--Mobile-->

我正在使用元标记使网站可以扩展到不同的平台。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimun-scale=1.0, initial-scale=1.0"/>

这是我的响应式设计的HTML / CSS代码。

HTML：

<body>


    <div id="controls">

        <a href="index.html">Home</a>
        <a href="work.html">Work</a>
        <a href="contact.html">About</a>


    </div>


    <div id="pagewrap">

        <div id="home">

            <article>

                <img src="images/Logo.png" width="150" height="150" alt="Logo"/>
                <p>My name is Nabeel Muhammad and I change innovative ideas into design </p>

                <div id="socialmedia">

                    <a href="https://twitter.com/mnabeel87" target="new"> <img src="images/twitter.jpg" height="40" width="40" alt="Twitter Logo"/></a>

                    <a href="http://www.linkedin.com/in/mnabeel87" target="new"> <img src="images/linkedin.jpg" height="40" width="40" alt="Linkedin Logo"/> </a>

                </div> <!--Social Media Ends-->
            </article>  

            <div id="skillslevel"><p>Skills Level</p></div>


            <section>
                <div id="psskills"> <img src="images/photoshop.png" width="40" height="40" alt="Adobe PhotoShop" /> </div>
                <div id="psrating"> </div>

                <div id="aiskills">  <img src="images/illustrator.png" width="40" height="40" alt="Adobe Illustrator" /> </div>
                <div id="airating" > </div>

                <div id="inskills"> <img src="images/indesign.png" width="40" height="40" alt="Adobe InDesign" /> </div>
                <div id="inrating"0> </div>

                <div id="dwskills"> <img src="images/dremweaver.png" width="40" height="40" alt="Adobe DreamWeaver" /> </div>
                <div id="dwrating"> </div>

                <div id="prskills"> <img src="images/premier.png" width="40" height="40" alt="Adobe DreamWeaver" /> </div>
                <div id="prrating"> </div>

                <div id="htmlskills"> <img src="images/html.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
                <div id="htmlrating"> </div>

                <div id="cssskills"> <img src="images/css.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
                <div id="cssrating"> </div>

                <div id="jsskills"> <img src="images/javascript.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
                <div id="jsrating"> </div>

                <div id="jqskills"> <img src="images/jquery.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
                <div id="jqrating"> </div>

            </section>

            <div id="scale"> <img src="images/linebar.png"  width="330" alt="Scale"/> </div>  
            <div id="ratingnumber">
                <ul>
                    <li>1</li>
                    <li>5</li>
                    <li>10</li>
                </ul>
            </div>


        </div> <!--Home Ends-->

    </div>

CSS for mobile

#pagewrap {
    width: 480px;
    margin: 0 0 0 -0.6em;
    position:relative;
}


#controls {
    margin:-0.3em auto 0 -0.3em;
    text-align: center;
    width:480px;
    font-family: 'Bebas';
    font-size:1.87em;
    background-color: #b0d8a3;

    line-height:1.3em;
}

#controls a {
    display: inline-block;
    width: 480px;
    margin: 0 auto;
    background: #5cc3c1;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    line-height: 32px;
}


#home article img {
    position:relative;
    left:3em;
    top:4em;
}

#home article p {
    font-size:2.5em;
    font-family: 'Bebas';
    text-align:left;
    position:relative;
    width:10em;
    left:1em;
    top:1em;
    line-height:1.1em;
    padding: 0 0;


}
#socialmedia {
    position: relative;
    top:-1.8em;
    left:-0.5em;
    margin-right:1em;

}

#socialmedia img {
    position:absolute;
    left:8em;
    top: 2.5em;


}



/*Skills*/

#skillslevel {
    position:absolute;
    top:25em;
    left:2.5em;

}

#skillslevel p {
    font-size:1.5em;
    font-family: 'Cabin';
}

section {
    position: relative;
    bottom:22.5em;
}

section #psskills {
    position: absolute;
    left:2.5em;
    top:27em;

}

section #psrating {
    width: 20.3em;
    height: 2.3em;
    background: #bfddc3;
    position: absolute;
    left:5.5em;
    top:27em;
}

section #aiskills {
    position: absolute;
    left:2.5em;
    top:30em;

}

section #airating {
    width:18.6em;
    height:2.3em;
    background-color: #bfddc3;
    position: absolute ;
    left: 5.5em;
    top:30em;
}

section #inskills {
    position:absolute;
    left:2.5em;
    top:33em;
}

section #inrating {
    width:19.3em;
    height:2.3em;
    background-color: #bfddc3;
    position: absolute ;
    left: 5.5em;
    top:33em;
}

section #dwskills {
    position:absolute;
    left:2.5em;
    top:36em;
}

section #dwrating {
    width:19.8em;
    height:2.3em;
    background-color: #bfddc3;
    position: absolute ;
    left: 5.5em;
    top:36em;
}

section #prskills {
    position:absolute;
    left:2.5em;
    top:39em;
}

section #prrating {
    width:19.3em;
    height:2.3em;
    background-color: #bfddc3;
    position: absolute ;
    left: 5.5em;
    top:39em;
}

section #htmlskills {
    position:absolute;
    left:2.5em;
    top:42em;
}

section #htmlrating {
    width:20.3em;
    height:2.3em;
    background-color: #adc8bf;
    position: absolute ;
    left: 5.5em;
    top:42em;
}

section #cssskills {
    position:absolute;
    left:2.5em;
    top:45em;
}

section #cssrating {
    width:20.3em;
    height:2.3em;
    background-color: #adc8bf;
    position: absolute ;
    left: 5.5em;
    top:45em;
}

section #jsskills {
    position:absolute;
    left:2.5em;
    top:48em;
}

section #jsrating {
    width:14.3em;
    height:2.3em;
    background-color: #adc8bf;
    position: absolute ;
    left: 5.5em;
    top:48em;
}

section #jqskills {
    position:absolute;
    left:2.5em;
    top:51em;
}

section #jqrating {
    width:12.3em;
    height:2.3em;
    background-color: #adc8bf;
    position: absolute ;
    left: 5.5em;
    top:51em;
}

#scale {
    position:absolute;
    top:48.5em;
    left:5.2em;




}

#ratingnumber ul{
    position:absolute;
    top:57em;
    left:-6em;
    list-style:none;


}

#ratingnumber ul li{
    display:inline-block;
    margin-left:9em;
    font-family: 'Cabin'; 
    font-size:16px;

}

我知道很多CSS，你们中的一些人可能会发现一些无用的东西，但这就是我解决问题的方法。

所以当我用平板电脑打开网站时，它运行正常，但是一旦我在移动设备上打开它，设计就会崩溃。

感谢您的帮助。

Answer 1

我在你的视口中注意到你在最小尺度上拼写错误。

这将打破缩放。

我的网站的响应问题

1 个答案: