HTML - SCSS - ブレイクポイント（メディアクエリ）

1.　ブレイクポイント

2.　なんとかしたいコード

3.　SCSS

4.　コンパイル結果

1.　ブレイクポイント

　タイトルがこれで適切なのかどうかもわからない。
　とにかく、下記を参考にしています。

「Sassの変数とmixinで変更に強いメディアクエリをつくる」
「MediaQueriesを横着して書く方法@Sass」


2.　なんとかしたいコード

　一応、軽く説明しておきますれば、このサイトに置いている画像ファイルは、一程度以上のウィンドウサイズがあっても最大 800px で表示しています。
　それをモバイルやスマートフォンで表示する際は、なるべく、そのウィンドウの最大幅から少し小さくした程度で表示するように設定しています。
　要はこれを簡単にできるみたいなのですが・・・


@media all and (min-device-width: 800px)					/*	最小 800px 						*/
{
	img							   							/*	横幅最大値	800px				*/
	{
	   max-width: 800px;
	   height: auto;
	}
}

@media all and (max-device-width: 768px)					/*	最大 768px 						*/
{
	img
	{
	   max-width: 768px;
	   height: auto;
	}
}

@media all and (max-device-width: 435px)					/*	最大 435px 						*/
{
	img
	{
	   max-width: 411px;
	   height: auto;
	}
}

@media all and (max-device-width: 375px)					/*	最大 375px 						*/
{
	img
	{
	   max-width: 360px;
	   height: auto;
	}
}

@media all and (max-device-width: 320px)					/*	最大 320px 						*/
{
	img
	{
	   max-width: 320px;
	   height: auto;
	}
}


3.　SCSS

　うまく説明できるようになったら解説しますが、新しい機種も増えたようなので、それも含めて .scss でこう書きました。


//	モバイル・スマートフォン
//	 	iPad Pro		1024x1366
//
// 		iPad 			 768x1024
//
// 		iPhone8 Plus	 414x 736
//	 	iPhone7 Plus	 414x 736
// 		iPhone6 Plus	 414x 736
//
//	 	Nexus5X			 412x 732
//	 	Nexus6P			 412x 732
//
//	 	iPhoneX			 375x 812
//	 	iPhone8			 375x 667
//	 	iPhone7			 375x 667
//	 	iPhone6			 375x 667
//
//	 	Galaxy5S		 360x 640
//
//	 	iPhone5			 320x 568

$breakpoint-down:
(
	'mx-1024': 'all and (max-width: 1024px)',
	'mx-0768': 'all and (max-width:  768px)',
	'mx-0414': 'all and (max-width:  414px)',
	'mx-0412': 'all and (max-width:  412px)',
	'mx-0375': 'all and (max-width:  375px)',
	'mx-0360': 'all and (max-width:  360px)',
	'mx-0320': 'all and (max-width:  320px)',
) !default;

@mixin mq-down($breakpoint: mx-1024)
{
	@media #{map-get($breakpoint-down, $breakpoint)}
	{
		@content;
	}
}

img
{
	max-width: 800px;
	height: auto;

	@include  mq-down(mx-0768) {	width:  768px;  }
	@include  mq-down(mx-0414) {	width:  414px;  }
	@include  mq-down(mx-0412) {	width:  412px;  }
	@include  mq-down(mx-0375) {	width:  375px;  }
	@include  mq-down(mx-0360) {	width:  360px;  }
	@include  mq-down(mx-0320) {	width:  320px;  }
}


4.　コンパイル結果

　コンパイルの結果がこうで、これで良さそうな気がします。


img {
  max-width: 800px;
  height: auto;
}
@media all and (max-width: 768px) {
  img {
    width: 768px;
  }
}
@media all and (max-width: 414px) {
  img {
    width: 414px;
  }
}
@media all and (max-width: 412px) {
  img {
    width: 412px;
  }
}
@media all and (max-width: 375px) {
  img {
    width: 375px;
  }
}
@media all and (max-width: 360px) {
  img {
    width: 360px;
  }
}
@media all and (max-width: 320px) {
  img {
    width: 320px;
  }
}