スマホとPCで表示する内容をガラッと変える方法

ランサーズというクラウドソーシングサイトのユーザーページのデザインが添付画像のようにPCとスマホで全然違うのですがこれはどうやって実装しているのでしょうか？

現在Web開発勉強中で、自分の知っているPCとスマホのデザインを変える方法は
・cssによるレスポンシブ
・デバイス毎に読み込むhtmlを変える
なのですが、cssのみでやるには無理があると思いますし、デバイス毎に読み込むhtmlを変えているわけでもなさそうです（モバイル表示時とPC表示時のソースが全く同じだったため）。

ご教授いただけると幸いです。

kei344

2019/01/02 15:07

「cssのみでやるには無理がある」とは？

退会済みユーザー

2019/01/02 15:09

PCで開いて幅を調整してみてください！！　それだけで判断が付きます。レイアウトが変更される→レスポンシブレイアウトが変更されない→読み込むHTMLを変更

行動規範の内容に同意します

回答3件

ベストアンサー

「デバイス毎」ではあるのですが正確には、「デバイスの画面サイズ毎」にCSSの内容を切り替えるのが一般的かなと思います。
こちらのサイトがわかりやすいので抜粋いたしました。

2015年04月04日　デバイスに応じたCSSの振り分けでレスポンシブ対応にした

まずはhtmlの <HEAD>～</HEAD>の中に以下のコードを追加する。
<meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2" />

〜省略〜

次にCSSの中に以下をペーストし、カスタマイズしていく。

別に新しいCSSファイルを追加する必要はない。
今まで使っていたCSSファイルに以下を追加でOK。
（以下3種類のデバイスごとにCSSファイルを作っても良い。）

/===============================================
画面の横幅が769px以上（パソコン用）
===============================================/
@media screen and (min-width: 769px){
この部分にパソコン用だけに対応させたいCSSコードを入力していく
}

/===============================================
画面の横幅が768pxまで（タブレット用）
===============================================/
@media screen and (max-width: 768px){
この部分にタブレット用・スマホ用に対応させたいCSSコードを入力していく
}

/===============================================
画面の横幅が640pxまで（スマホ用）
===============================================/
@media screen and (max-width:640px){
この部分にスマホ用だけに対応させたいCSSコードを入力していく
}