メディアクエリを使用して要素の位置を変更する

サイズ画面が変更されたときの位置を変更する場合は、ここをクリックしてください。http://jsfiddle.net/KAz2u/ 右の画面にはロゴがあり、右側にはナビゲーションツールバーがあります小さな画面の場合はページの中央に表示されます。ここでメディアクエリを使用して要素の位置を変更する

は私のCSSコード

.logo{ 
    width: 70px; 
    position: fixed; 
    top: 15px; 
    left: 30px;} 

nav{ 
    position: fixed; 
    right: 35px; 
    top: 50px; 
    font-family: "Brown-Regular"; 
    word-spacing: 3px; 
    letter-spacing: 1px; 
    font-size: 8pt; 
    z-index: 1;} 

@media(max-device-width: 480px){ 
.logo{ 
    position:relative; 
    display: block; 
    margin: 0 auto; 
    top: 10px; 
    left: 0; 
    } 

nav{ 
    position: relative; 
    display: block; 
    margin: 0 auto; 
    top: 50px; 
    right: 0; 
    word-spacing: 70px; 
    } 
}

の一部であり、これは私のHTMLコードの先頭である：私が欲しいと残念ながらそれが機能していない

<img class="logo" src="pics/logo.svg" alt="logo" /> 
<nav><a href="index.html">WORK</a> 
<a href="mailto:">CONTACT</a> 
<a href="#infos">INFOS</a></nav>

、要素はありません（携帯電話で）左に少し移動しますが、私は何が間違っているのか分かりません。ありがとうございます！メディアクエリで

出典

2017-02-27 Catherine

は、あなたがより多くの詳細を与えることができます動作するはず

？ – mhatch

利用max-width代わりのmax-device-width

出典

2017-02-27 20:23:20 Johannes

使用@media screen and(max-width: 480px){あなたはそれのように仕事をしたいかに

出典

2017-02-27 20:26:00

これは質問に対する答えを提供しません。十分な[評判]（http://stackoverflow.com/help/whats-reputation）があれば、[任意の投稿にコメントする]ことができます（http://stackoverflow.com/help/privileges/comment）。代わりに、[質問者からの説明を必要としない回答を提供する]（http://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- i-do-代わりに）。 - [レビューから]（/レビュー/低品質の投稿/ 15360288） – junkfoodjunkie

彼のメディアクエリは間違っています@junkfoodjunkie –

メディアクエリを使用して要素の位置を変更する

答えて

関連する問題