【残り いしかわさん担当】 レスポンシブ処理の調整

[kurudrive]

モバイル / タブレット / PC で画像の出し分けなど、画面サイズ毎の処理をしているブロックをリストアップ
各ブロックについて、
モバイル : max-width
タブレット : min-width / max-width
PC : min-width
を調べてください。

[shimotmk]

ブロック名	SP	タブレット	PC	それ以上
・balloon	@media only screen and (max-width: 480px)
・border-box			@media (min-width: 992px)
・faq			@media (min-width: 768px)
・icon		@media screen and (max-width: 992px)
・pr-blocks		@media screen and (max-width: 992px)
・pr-content	@media (max-width: 575.98px)	@media (min-width: 576px)	@media (min-width: 992px)
・spacer	@media (max-width: 576px)	@media (min-width: 577px) and (max-width: 768px)	@media (min-width: 769px)
・staff			@media (min-width: 992px)	@media (min-width: 1200px)
PRO
・card	@media (max-width: 576px)	@media (min-width: 577px) and (max-width: 768px)	@media (min-width: 769px)
・icon-card-item		@media screen and (max-width: 992px)
・outer		@media (min-width: 577px)	@media (min-width: 769px)
・slider	@media (max-width: 575.98px) @media (max-width: 576px)	@media (min-width: 577px) and (max-width: 768px)	@media (min-width: 769px)
・table-of-contents-new		@media (min-width: 576px)

@kurudrive
vk-blocksのcssで使用しているメディアクエリは、このような形でした。

• スマホ
  @media (max-width: 576px)
• タブレット
  @media (min-width: 577px) and (max-width: 992px)
  max-width: 768pxが５個
  max-width: 992pxが６個
• PC
  @media (min-width: 992px)

で統一していくのが妥当かなと思います。

[kurudrive]

@shimotmk ありがとうございます！完璧デス！
1px 単位でかぶっている処理等があるので

スマホ
@media (max-width: 575.98px)

タブレット
@media (min-width: 576px) and (max-width: 991.98px)

PC
@media (min-width: 992px)

イレギュラー : 管理画面側での指定はなく、CSSでブレイクポイントが一つの場合（モバイル/PC など）以下の設定がありえる
@media (min-width: 768px)

で統一しましょう！

[kurudrive]

@shimotmk @drill-lancer @miminari @sysbird @mthaichi @goutetsuguma

■ 修正が必要なブロック

• max-width: 576px → max-width: 575.98px （min が 576px なので）
• max-width: 992px → max-width: 991.98px （min が 992px なので）
• 直接CSSを吐き出しているものは要deprecated
• ブレイクポイントが一つで、設定パネルで モバイル / タブレット / PC という設定指定のないものは着手しなくてOK

• readme.md にブレイクポイントを記載する
  →【確認待ち】docs: ブレイクポイントのドキュメントを追加 #768
• icon
  →【確認待ち】Fix/icon/breakpoint #769
• pr-blocks
  →【確認待ち】fix / pr-blocks : ブレイクポイントを調整 #770
• spacer → いしかわ担当
  

  vk-blocks-pro/src/blocks/spacer/style.scss

  Lines 24 to 37 in d14d764

  	// Small devices (landscape phones, 576px以下)
  	@media (max-width: 576px) {
  	@include switchVisibility(none, none, block);
  	}
  	// Medium devices (tablets, 577pxから768px)
  	@media (min-width: 577px) and (max-width: 768px) {
  	@include switchVisibility(none, block, none);
  	}
  	// Large devices (desktops, 769px以上)
  	@media (min-width: 769px) {
  	@include switchVisibility(block, none, none);
  	}

• card
  →カードブロック ブレイクポイント修正 #1000
• outer
  【確認待ち】Outerブロックのカスタムカラーパレットに対応 #1041
• slider
  →【確認中】スライダーアイテムをカスタムカラーパレットに対応 #925

こちらはパターンに置き換わるから物凄く優先度低くてOKかな...

• icon-card-item
  →【確認待ち】 icon-card-item ブレイクポイントの修正 #1019