1

レイアウトをレスポンシブデザインに変換中です。私はいくつかのチュートリアルを見て、いくつかの調整を行いました。ただし、携帯電話やiPadにページを読み込んだり、ウィンドウを小さくしたりすると、コンテンツが重なり合って実行されます。ピクセルの代わりに％を使用するとこれが修正されるという印象を受けました。私が間違っている？リンクは以下のとおりです。

http://tinyurl.com/ab2fmwv

article {
width: 80%;
min-height: 100%;
margin-left: auto;
margin-right: auto;
border: solid;
position: relative;
overflow: hidden;
clear: both;
}
#two_column_left {
width: 74%;
float: left;
background-color: #FFFFFF;
}

#two_column_right {
width: 25%;
float: right;
}
.three-col-row {
width: 100%;
float: left;
padding-top: 2%;

}

.col-1 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;
}
.col-2 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;

}
.col-3 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;

}
.pic-3-col {
width: 175px;
height: 100px;
}
p.title-3-col {
color: #222020;
font-size: 1.3em;
clear: both;
}
p.description-3-col {
width: 190px;
}
4

2 に答える 2

1

列のサイズは完全ですが、内容はそうではありません。例えば

.pic-3-col {
width: 175px;
height: 100px;
}

レスポンシブな流動的なレイアウトが必要な場合は、CSSにこのような値を含めないでください。

于 2013-03-01T04:45:38.153 に答える
0

次のクラスにピクセル単位の幅を使用しています

p.description-2-col style.css line no439solu。'max-width 100％'を追加します

p.description-3-col style.css line no406solu。'max-width 100％'を追加します

.pic-3-col     style.css line no 197    solu.   add it 'max-width 100%'  </br>

最初の列が実行されるのと同じ列の画像を.pic-3-colでラップします

また、解像度に応じて、メディアクエリを使用してパーセンテージで彼らの幅を変え続けます

于 2013-03-01T05:25:02.400 に答える