たとえるなら
器に合わせて形を変える水のようなものです。同じ水(同じWebページ)でも、コップに注げば縦長に、お皿に注げば横に広がります。ページの中身は同じまま、入れ物(画面サイズ)に合わせて並び方が変わるのです。
もう少しくわしく
レスポンシブ(responsive)は「反応する」という意味で、閲覧する画面の大きさに反応して、レイアウトが自動で切り替わるWebデザインの手法です。正式にはレスポンシブデザイン(レスポンシブWebデザイン)と言います。パソコンでは3列に並んでいた記事が、スマホでは1列に縦に並ぶ——同じページなのに端末ごとに最適な見た目になるのは、この仕組みのおかげです。
スマホでのネット利用が当たり前になり、Webサイトはスマホで見やすいことが大前提になりました。かつてはパソコン用とスマホ用に別々のページを作る方法もありましたが、2つを作って更新し続けるのは大変です。レスポンシブなら1つのページで両方に対応でき、管理の手間も減るため、現在の標準的な作り方になっています。
実現には主にCSS(見た目の飾り付けを担当する言語)を使い、「画面の幅がこれより狭ければ、この並び方にする」という条件を書いていきます。デザイナーとエンジニアは、スマホ・タブレット・パソコンそれぞれの見え方を想定しながら画面を設計します。
現場での使われ方
「このページ、レスポンシブ対応できてますか?」
スマホやタブレットで見たときに、崩れずに見やすく表示されるか、という確認です。
「スマホで見ると表が切れちゃうので、レスポンシブの調整をお願いします」
狭い画面での表示に問題があるので、画面幅に応じた見せ方を直してほしい、という依頼です。
よくある質問
レスポンシブ対応とスマホ対応は同じ意味ですか?
ほぼ同じ意味で使われます。厳密には、スマホ対応の実現方法のひとつがレスポンシブデザインです。スマホ専用ページを別に作る方法もありますが、いまはレスポンシブが主流のため、実質同じ意味で通じます。