読者です 読者をやめる 読者になる 読者になる

不器用さんの5限目は図工

不器用でもいろいろ、つくりたい。

【CSS】スマホではmargin-topを相対値%で使っていはいけない

ども!技術的な話とかも増やしていこうと思っているあきあです!

とりあえず第一回はスマホでのCSSのお話。

f:id:akia7:20160116155436p:plain

スマホと言えば相対指定ですよね。

私もまだスマホ歴は長くないのですが、そんな中相対指定での移動方法について、この前触ってて気づいたことです。

topmargin-toptranslate相対で下にさげる実験をしてみます。

 

【前提】

  • 親が横401px、縦301pxのBOXをつくる(線を見せるために+1px)
  • その中に横100px、縦50pxのBOXをつくる

これにそれぞれのCSSをかけてみるとどうなるか 。

css

.box_wrap{
	position:relative;
	margin: 0;
	padding: 0;
	width: 401px;
	height: 301px;
	background: transparent url(背景の線) 0 0 no-repeat;
	word-wrap: break-word;
}
.box1,.box2,.box3,.box4{
	position: absolute;
	width: 100px;
	height: 50px;
	background: #f90;
	opacity: 0.8;
}
.box1{
	top: 0;
	left: 0;
	margin-top: 0;
}
.box2{
	top: 0;
	left: 100px;
	top: 50%;
}
.box3{
	top: 0;
	left: 200px;
	margin-top: 50%;
}
.box4{
	top: 0;
	left: 300px;
	-webkit-transform: translate(0,50%);
	-ms-transform: translate(0,50%);
	-o-transform: translate(0,50%);
	transform: translate(0,50%);
}

【HTML】

<div class="box_wrap">
	<div class="box1">基準</div>
	<div class="box2">top:50%</div>
	<div class="box3">margin-top: 50%</div>
	<div class="box4">translate(0,50%)</div>
</div>
	


結果

基準
top:50%
margin-top: 50%
translate(0,50%)

アナタの端末ではどう見えましたか?

実はこれAndroidiPhoneで結果が違うのです!

(確認はAndroid4.2とiOS8)

iPhone 

f:id:akia7:20160208005202p:plain



Android
f:id:akia7:20160208005200p:plain

 

【結果】(確認はAndroid4.2とiOS8)

  • topは親の縦が基準
  • margin-topは、iPhoneは親の横、Androidは親の縦が基準
  • translateは自分の縦が基準


【結論】 スマホではmargin-topを相対値%で使っていはいけない

 

 最近スマホのコーディングが多くて、IE対応が不要ですごく心穏やかなあきあでした!

 

Twitter

▲TOP
当ブログで使用されている文章、画像、情報など全ての無断転載・複製を固く禁じます。