今スマホ向けのLPを作っています。
ものを作りたいと思っています。
二重になっている丸はIllustratorで作りpngにしました。
(この画像は「special_circle.png」です。)
そしてこれを表現するためにこのようなコーディングをしました。
html
1<div id="allSpecial"> 2 <div class="special1"> 3 <img src="images/special_circle.png"> 4 <div class="spInner"> 5 <h2>タイトル</h2> 6 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 7 </div> 8 </div> 9</div>
そしてcssはこのようにコーディングしました。
css
1.special1{ 2 position: relative; 3} 4#allSpecial img{ 5 width: 100%; 6} 7.spInner{ 8 position: absolute; 9 width: 90%; 10 margin: auto; 11 top: 0; 12 right: 0; 13 bottom: 0; 14 left: 0; 15} 16#allSpecial h2{ 17 text-align: center; 18 margin: 0 auto; 19 padding-top: 40px; 20 color: #EC5D57; 21 border-bottom: 2px solid #EC5D57; 22 width: 60%; 23} 24#allSpecial p{ 25 width: 70%; 26 margin: 0 auto; 27 padding-top: 20px; 28 font-size: 90%; 29 color: #EC5D57; 30 }
スマホのデバイスによって文字サイズが変化するようにfont-sizeを「%」指定しているのに、、
スマホのデバイスによって文字の大きさが変わりません。
なので例えばiPhone6でいい感じのサイズで作り、iphone5で見てみると赤い丸からテキストがはみ出していたり、iphone6plusで見ると全然丸が埋まっていなかったりします。。
初歩的な部分かもしれませんが、どうか教えていただけると嬉しいです。
よろしくお願い致します。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/03/15 03:49