縦幅を子要素の大きさによって可変する

コンテンツを覆う親要素に
overflow: hidden;
を設定してあげると、子要素のサイズに合わせて親要素が可変します。

<div class="wrap">
  <div class="inner">
     <p　class="content">コンテンツ</p>
   </div>
</div>

.wrap{
  background-image: url(); //背景色でも。画像は可変するのでSVGじゃないと荒れます
  overflow: hidden; //子要素を認識
}

.inner{
  padding: 30px 0; //子要素を調整します、ご自由に
}

わざわざ背景にheightを設定しなくても、自然と子要素に合わせて背景サイズが変わってくれました。
overflow: hidden;は他にも色々な使い所があり便利なプロパティですね。

程よく画像などの要素を可変させたい

画像に%を設定すると、可変してくれますが、大きくなりすぎたり小さくなりすぎたりすることがあります。そんな時は

.img{
  width: 25%; //25%で画面サイズに合わせて可変します
  height: auto; //高さは自動調節されます※％で設定してもok
  max-width: 100px; //100px以上にはなりません
  min-width: 50px; //50px以下にはなりません
}

という具合に、max-widthやmin-widthを設定してあげると程よく可変してくれました。
画像だけじゃなく、テキストボックスや他の要素にも使えます。

わざとカラム落ちさせる

よ〜く使われるdisplay: flex;ですが、画像やテキストボックスなどのアイテムを横並びにした際
width: 100%やflex-direction: column;などを、メディアクエリの記述によって縦並びにするのもいいのですが

<div class="wrap">
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>

.wrap{
  display: flex; //横並び
  flex-wrap: wrap; //要素幅が100%を超えたとき自然と縦並びになってくれる
  /*widthは数値で設定しないでね！カラム落ちしなくなるよ*/
}

という具合にflex-wrap: wrap;を指定しておくだけで、カラム落ちしてitemが縦並びになりました。

皆さん他にも便利なレスポンシブプロパティがあったら教えてください♪