背景画像をレスポンシブ化

[rotsuya]

モバイルには重いので。Bootstrapのブレイクポイントは、sm 768px, md 992px, lg 1200pxです。

例えば、

body {
  background-image: url(../img/509011887-xs.jpg);  /* スマホ用(iPhone 6 plusの横414pxくらい？)、縦長 */
  ...
}
@media (min-width: 768px) {
  body {
    background-image: url(../img/509011887-lg.jpg);  /* PC用(横1600pxくらい？)、横長 */
      ...
  }
}

less使いたいね。

body {
  background-image: url(../img/509011887-xs.jpg);  /* スマホ用(iPhone 6 plusの横414pxくらい？)、縦長 */
  @media (min-width: 768px) {
    background-image: url(../img/509011887-lg.jpg);  /* PC用(横1600pxくらい？)、横長 */
  }
  ...
}

[rotsuya]

46 で「#37 に対応する」とコミットログを書いてしまいましたが、 #31 の間違いでーす。

[rotsuya]

画面サイズを検討する。

position: fixed; なしの場合

Mode	Device	Orientation	Document Size	Document Aspect Ratio
xs(<768)	iPhone 5	Portlait	320 x 1308	0.244648318
	iPhone 6 Plus	Landscape	736 x 1188	0.6279461279
sm(≥768)	iPad	Portlait	768 x 1024	0.75
	max of sm		991 x 884	1.121040724
md(≥992)	min of md		992 x 899	1.1034482759
	max of md		1199 x 899	1.3337041157
lg(≥1200)	MBP13		1440 x 900	1.6
	FullHD		1920 x 1080	1.7777777778

xs(スマートフォン)で縦が非常に長くなるので、やめる。

position: fixed; ありの場合

Mode	Device	Orientation	Viewport Size	Image Size
xs	iPhone 6 Plus	Portlait	414 x 736	736 x 736
	iPhone 6 Plus	Landscape	736 x 414
sm	Nexus 10	Portlait	800 x 1280	1050 x 700
	Nexus 7	Landscape	966 x 604
md	iPad	Landscape	1024 x 768	1280 x 800
lg	MBP13		1440 x 900	1920 x 1200
	FullHD		1920 x 1080

これで決定。