レスポンシブ、今や当たり前ですが未だに慣れません。ボタン一つで簡単設定できないので、最初の設計がとても大切ですね。
/*----------------------------------------------------
responsive指定法いろいろ
----------------------------------------------------*/
@media screen and (max-width: 1060px){
//ディスプレイの幅が1060px以下の時に表示する内容
}
@media screen and (max-width: 640px){
//ディスプレイの幅が640px以下の時に表示する内容
}
@media screen and (max-width: 320px){
//ディスプレイの幅が320px以下の時に表示する内容
}
@media screen and (min-width: 600px) and (max-width: 900px) {
//ディスプレイの幅が600px以上900以下の時に表示する内容
}
@media screen and (max-device-width: 320px) {
//デバイスのディスプレイの幅が最大320pxの時に表示する内容
}
Media Queriesの振り分け条件
Max Width：ビューエリアの最大幅。このサイズより小さい場合に適用
Min Width：ビューエリアの最小幅。このサイズより大きい場合に適用
Max Device Width：デバイスサイズの最大幅。このサイズより小さい場合に適用
Min Device Width：デバイスサイズの最小幅。このサイズより大きい場合に適用
Device Pixel Ratio：デバイスの解像度（webkit）
Orientation：デバイスの向き
