个人中心
gpt4 book ai didi

html - 我的网站的响应问题

转载 作者：行者123 更新时间：2023-11-28 10:36:49 25 4
gpt4 key购买 nike

这个问题我之前也问过，但是太乱了，也没法说清楚。我修复了我的网站，现在正在测试让我的响应式网站在不同的移动平台上工作。然而，当在 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

#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，有些人可能会发现有些东西没用，但这就是我解决问题的方式。

所以当我在平板电脑上打开网站时，它工作正常，但一旦我在手机上打开它，设计就崩溃了。

感谢您的帮助。

最佳答案

我注意到在您的视口(viewport)中，您将 minimum in minimum-scale 拼错了。

这会破坏缩放比例。

关于html - 我的网站的响应问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23305923/

25 4 0
文章推荐： javascript - 检查数组内可以成功转换为数字的字符串数量
文章推荐： jquery - 在当前 Div 之外切换 Div
文章推荐： javascript - 如何在 JavaScript 中向自定义类型添加方法
文章推荐： 页面加载时不应用 css 规则
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com