내 웹 사이트의 반응 문제

이전에이 질문을했는데 너무 혼란스럽고 명확하게 설명 할 수 없었습니다. 나는 나의 웹 사이트를 고쳤고, 이제 나의 응답 성있는 사이트가 다른 모바일 플랫폼에서 작동하도록 테스트를하고있다. 그러나 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 : 모바일

#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의 그것을 많이 알고에 대한

<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, 당신의 일부는 쓸모없는 것들의 일부를 찾을 수 있지만, 나는이 문제를 접근하는 방법이있다.

그래서 태블릿에서 웹 사이트를 열면 제대로 작동하지만 모바일에서 열면 디자인이 떨어져 버립니다.

도움 주셔서 감사합니다.

출처

2014-04-26 Nabeel M

귀하의 뷰포트에서 최소 눈금의 철자가 잘못 표시되었습니다.

이렇게하면 배율이 깨집니다.

출처

2014-04-26 22:13:18

내 웹 사이트의 반응 문제

답변

관련 문제