画面幅によって要素を出し分ける方法はcssだけで簡単に実現できる。
displayプロパティとメディアクエリを使う。表示したくない時はdispaly:noneとし、表示したい画面幅の時にdispaly:blockとすればOK。
例１：画面幅375px以下で改行する
376px以上の時は1行で表示して、375px以下になった時に、<br>タグで改行する処理。
<br class="newline">を２つ挿入し、デフォルトはdisplay: none;とする。メディアクエリを使って375px以下の時はdisplay: block;にする。
.css
.newline{
display: none;
}
@media screen and (max-width:375px) {
.newline{
display: block;
}
}
.html
<p>
画面幅によって出し分ける方法。
<br class="newline">
<br class="newline">
375px以下で改行する
</p>
sassで記述する
sassのmixinを使うと、簡単に呼び出せるようになりメンテ性が上がる。
.scss
//mixinの定義
@mixin mq-down ( $breakpoint: 375px ){
@media screen and (max-width: $breakpoint){
@content
}
}
//cssの設定
.newline{
display: none;
@include mq-down{
display: block;
}
}
▼mixinの定義
・@mixin ミクシン名 ( 初期値 ){処理}
・@include ミクシン名
mixinの呼び出し。引数を指定しない場合は初期値が入る。
例えば、@include mq-down(600px)とすれば、ブレイクポイントが600pxになる。
・@content
mixinの中で@contentを使うと、呼び出した時に{ }の中に記述した内容が@contentの中に入る。
上記例では、display: blockがメディアクエリの{ }の中に記述される。
例２: 画面幅に合わせてdivタグを出し分ける
3つのdivタグを用意して、600px, 375px毎にdivを１つづつ減らしていく。
.css
.div1 {
background: blue;
}
.div2 {
background: red;
display: none;
}
@media screen and (min-width: 375px) {
.div2 {
display: block;
}
}
.div3 {
background: green;
display: none;
}
@media screen and (min-width: 600px) {
.div3 {
display: block;
}
}
.html
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
Sassで記述する
sassのmixinを使うとシンプルになる。
.scss
//mixinの定義
@mixin mq-up ( $breakpoint: 375px ){
@media screen and (min-width: $breakpoint){
@content
}
}
//cssの設定
.div1{
background: blue;
}
.div2{
background: red;
display: none;
@include mq-up{
display: block;
}
}
.div3{
background: green;
display: none;
@include mq-up(600px){
display: block;
}
}
scss便利。
↧