0
私はこのコードを使用して、定型CSS定義のdivブロックに様々なコンテンツを配置することができますが、時にはそのようなページを応答性のあるものにする必要があります完了？ 私はコードが含まれている：特定のターゲットの画面サイズを変更するにはCSS DIVブロックの応答性を向上させる
#page_content {
min-height: 2000px;
}
#rectangle1 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle1.gif); */
margin-top: 0px;
margin-left: 0px;
height: 153px;
width: 479px;
z-index: 4;
top: 48px;
left: 29px;
position: absolute;
}
#rectangle2 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle2.gif); */
margin-top: 0px;
margin-left: 0px;
height: 153px;
width: 856px;
z-index: 4;
top: 48px;
left: 524px;
position: absolute;
}
#rectangle3 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle3.gif); */
margin-top: 0px;
margin-left: 0px;
height: 884px;
width: 520px;
z-index: 4;
top: 48px;
left: 1403px;
position: absolute;
}
#rectangle4 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle3.gif); */
margin-top: 0px;
margin-left: 0px;
height: 701px;
width: 1351px;
z-index: 4;
top: 229px;
left: 29px;
position: absolute;
}
#background {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/background.gif); */
margin-top: 0px;
margin-left: 0px;
height: 2000px;
width: 2000px;
z-index: 3;
top: 0px;
left: 0px;
position: absolute;
background-color: rgb(0,0,0);
}
.page_content_bkg {
width: 2000px;
height: 2000px;
left: 0px;
top: 0px;
display: block;
}
.container_div {
position: relative;
width: 2000px;
margin-bottom: 0px;
margin-right: auto;
margin-top: 0px;
margin-left: auto;
}
.spacing_div {
min-height: 0px;
height: 0px;
}
*:focus {
outline-style: none;
}
.full_width {
position: relative;
padding: 0px;
margin: 0px;
min-width: 2000px;
}
ains {
text-decoration: none;
}
html, body {
height: 100%;
background-color: #FFFFFF;
}
body {
-webkit-text-size-adjust: none;
height: 100%;
padding-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- (sg_cms) -->
<!-- -->
<!-- (sg_emit "sg_prototype_content/title.xml") -->
</head>
<body>
<div id="page_div">
<div class="full_width" id="page_content">
<div class="container_div">
<div id="background" class=""></div>
<div id="rectangle1" class="">
<iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe>
</div>
<div id="rectangle2" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
<div id="rectangle3" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
<div id="rectangle4" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
<div id="pagesize_gap" style="height:2000px;"></div>
<div id="clear_footer"></div>
</div><!-- /prototype container_div -->
</div><!-- /page_content:full_width -->
</div><!-- /page_div -->
<!-- (sg_chau) -->
<!-- (sg_suppress --> <!--) -->
</body>
</html>
「*できますか？*」 - はい。マークアップやスタイリングには多くの変更を加える必要があります。どのようにあなたのウェブサイトをさまざまな画面サイズのように見せたいのですか？それが終わったら、レスポンシブデザインのチュートリアルを読んでください。物事を一つずつ試してみてください。ブートストラップのようなライブラリをチェックしてください。 – Abhitalks
あなたの返信ありがとうございました...私はいくつかのプラグインまたはコードを追加することでこれを行うための速い方法があることを望んでいました）それは単にサンプル画像としての各ブロックを扱い、反応性のあるギャラリースクリプト？ – Gabriel
:)ライフ@gabrielにはショートカットがありません。しかし、ブートストラップのドキュメントを読むのに時間を費やして、最小限の労力でそれを行う方法を学ぶことができます。それより簡単に行くとは思わないでください。 – Abhitalks