1. ホーム
  2. 質問と答え
  3. CSSポジションレスポンスデザインのモバイルビュー

CSSポジションレスポンスデザインのモバイルビュー

2017-03-15 2 views
2

私はモバイルビューで自分のウェブサイトを表示する際に問題が発生しています。テキストとイメージは、より離れた位置に配置する必要があります。私は使用しようとしました@media screen and (max-width: 480px) それは、すべてのものとフッタクラスを持つ私のコンテナクラスがどんなにサイズ変更されていないかをリストのために働かせます。CSSポジションレスポンスデザインのモバイルビュー

デスクトップデザイン： 私が達成しようとしています何http://mah-webbutv.github.io/assets/material/da280a_inl6_bild1.jpg

： モバイルデザイン

enter image description here 

body { 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 25%; 
 
    background-color: #f1f1f1; 
 
    position: fixed; 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 

 

 

 
.container{ 
 

 
    margin-left:25%; 
 
    padding:1px 16px; 
 
    height:auto; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 

 
    ul { 
 
     position: relative; 
 
     width: 100%; 
 
    } 
 

 
    .container{ 
 
     margin-left:25%; 
 
     padding:1px 16px; 
 
     height:1000px; 
 
    } 
 

 
} 
 

 
div.item { 
 

 
    vertical-align: top; 
 
    display: inline-block; 
 

 
    text-align: center; 
 

 
    width: 520px; 
 
} 
 
.blog { 
 
    max-width: 100%; 
 
    height: auto; 
 
    background-color: grey; 
 
} 
 
.caption { 
 
    display: block; 
 
} 
 

 
.imgDes { 
 
    margin-left: 180px; 
 
    overflow: hidden; 
 
    text-align: left; 
 
} 
 
.imgDes p { 
 
    text-align: right; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 1rem; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<title>web</title> 
 
<head> 
 
    <meta content="width=device-width, initial-scale=1" name="viewport"> 
 
    <link href="style.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <nav> 
 
    <ul> 
 
    <li><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo"></li> 
 
    <li><a class="active" href="#home">Länk 1</a></li> 
 
    <li><a href="#news">Länk 2</a></li> 
 
    <li><a href="#contact">Länk 3</a></li> 
 
    <li><a href="#about">Länk 4</a></li> 
 
    </ul> 
 
</nav> 
 
    <div class="container"> 
 
    <h1>Innehåll</h1> 
 
    <div class="item"> 
 
     <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo" class="blog"> 
 
     <span class="caption"> 
 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
 

 
     </span> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo" class="blog"> 
 
     <span class="caption"> 
 

 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
 
     </span> 
 
    </div> 
 
    <div class="item"> 
 

 
     <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo" class="blog"> 
 
     <span class="caption"> 
 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
 
</span> 
 
    </div> 
 
    </div> 
 
<hr> 
 
<div class="container"> 
 
    <div class="slide-content"> 
 
    <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" width="400" height="400" alt="Delicious Ideas from AllRecipes.com"> 
 
    <div class="imgDes"> 
 

 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
 
       </p> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div> 
 
</body> 
 
</html>

出典

2017-03-15 Gabeblous Svensson

+0

コンテンツを小さな画面用にセンタリングするだけでなく、コンテンツの途中でスクロールするので、あなたはおそらく '

'の扱い方を変更したいでしょう。フッターのスクロール方法に関係なく、フッターが常にビューポートの底にとどまるようにしますか？または、コンテンツの一番下に表示しますか？ページの一番下に達したら表示されますか？ –

答えて

0

ここで重要な点は、メディアのクエリにmargin: 0 autoを使用することです。この場合、左右のマージンが同じになるように要素が中央に配置されます。 .itemから固定幅を削除するか、少なくとも.containerをオーバーフローさせないようにそれを小さくするように設定します。

body { 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 25%; 
 
    background-color: #f1f1f1; 
 
    position: fixed; 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 

 

 

 
.container{ 
 

 
    margin-left:25%; 
 
    padding:1px 16px; 
 
    height:auto; 
 
} 
 

 

 
div.item { 
 

 
    vertical-align: top; 
 
    display: inline-block; 
 

 
    text-align: center; 
 

 
    width: 520px; 
 
} 
 
.blog { 
 
    max-width: 100%; 
 
    height: auto; 
 
    background-color: grey; 
 
} 
 
.caption { 
 
    display: block; 
 
} 
 

 
.imgDes { 
 
    margin-left: 180px; 
 
    overflow: hidden; 
 
    text-align: left; 
 
} 
 
.imgDes p { 
 
    text-align: right; 
 
} 
 

 
/* as others have mentioned, you'll need to change this 
 
most likely to position: fixed, unless you want it 
 
just at the bottom of your content, where position: relative 
 
would be OK. Since you haven't asked about it, I've left it 
 
unchanged here */ 
 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 1rem; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
} 
 

 
/* moved your media query to the bottom of your styles, 
 
so it successfully overrides the styles set above */ 
 
@media screen and (max-width: 480px) { 
 

 
    ul { 
 
     position: relative; 
 
     width: 100%; 
 
    } 
 

 
    .container{ 
 
     /* margin: 0 auto; is a great trick for centering */ 
 
     margin: 0 auto; 
 
     
 
     padding:1px 16px; 
 
     height:1000px; 
 
    } 
 
    
 
    /* remove the set width on your items 
 
    could also set to width: 100%, which would be in line 
 
    with general responsive practices */ 
 
    div.item { 
 
     width: initial; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<title>web</title> 
 
<head> 
 
    <meta content="width=device-width, initial-scale=1" name="viewport"> 
 
    <link href="style.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <nav> 
 
    <ul> 
 
    <li><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo"></li> 
 
    <li><a class="active" href="#home">Länk 1</a></li> 
 
    <li><a href="#news">Länk 2</a></li> 
 
    <li><a href="#contact">Länk 3</a></li> 
 
    <li><a href="#about">Länk 4</a></li> 
 
    </ul> 
 
</nav> 
 
    <div class="container"> 
 
    <h1>Innehåll</h1> 
 
    <div class="item"> 
 
     <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo" class="blog"> 
 
     <span class="caption"> 
 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
 

 
     </span> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo" class="blog"> 
 
     <span class="caption"> 
 

 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
 
     </span> 
 
    </div> 
 
    <div class="item"> 
 

 
     <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo" class="blog"> 
 
     <span class="caption"> 
 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
 
</span> 
 
    </div> 
 
    </div> 
 
<hr> 
 
<div class="container"> 
 
    <div class="slide-content"> 
 
    <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" width="400" height="400" alt="Delicious Ideas from AllRecipes.com"> 
 
    <div class="imgDes"> 
 

 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
 
       </p> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div> 
 
</body> 
 
</html>

出典

2017-03-15 14:00:29

0

あなたのフッターは常に底部に配置されるようにするにはあなたはposition：fixedを使うべきです。絶対ではありません。

出典

2017-03-15 13:59:01 Tripduc

0

2つのこと：

あなたがモバイル最初の設計と大画面のための@mediaクエリを使用する必要があります。

あなたの問題は...一見すると、div.itemの幅を520ピクセル幅にハードコードしたように見えます。また、メディアクエリにルールを含めずに100％幅にするように見えます。

出典

2017-03-15 14:00:39

関連する問題

 関連する問題