質問と全く関係ないですが
(入門レベルならpx単位を使っても良いですが)もしも、レスポンシブ・デザインを勉強する場合は、px単位を使ってはダメです(下記参照)。
モバイル(タブレット、スマホ)端末のdp解像度
//z.wikiwiki.jp/bremen/topic/7
ザックリと言うと、レスポンシブ･デザインの注意点としては、「タグ内部のテキストと、それを囲うHTMLタグも」を冗長化してはならない。
分かり安く言うと、基本的に、PC用のタグ、タブレット用のタグ、スマホ用のように分けてはダメ(当然、部分的にでもダメ)。
趣味でSEOを気にしなくても良いなら、そこまで厳密に考え無くても良いです。
参考
SEO対策
//zawazawa.jp/bremen/topic/1
※↑それはプロ・レベルでは無く、あくまでも一般論レベルのSEO対策ですが、コーティング・スキルに関しては、(フロントエンド)セミプロ・レベルのスキルが必要になります。
それはコーティング・スキルに関しては、本気で(フロントエンド)セミプロ・レベルを勉強する気が無いなら無理だと言う事を意味しています。
下記のようなクソみたいな欠陥Webページだと、当然 SEO的にマイナスになります(当然、フロントエンド(プロ)としても失格です)。
\u0026gt;下の画像のページが表示されたら、このWebページ作ったヤツはアホだろと思ってブラウザ・バックしますよね？
\u0026gt;//drive.google.com/file/d/1znyw4kX9m4I4enroA931c7tyZ1wq8A91/view?usp=sharing
PCのみ対応のWebページなら一般的には約「1000px～3000px」解像度ぐらい、モバイルも対応のレスポンシブ･デザインなら一般的には約「300px～3000px」解像度ぐらいをChromeモバイル･エミュレーターでチェックしてみて下さい。
フロントエンド(プロ)だと6k解像度モニターぐらいは使ってるかもしれませんから、ポートフォリオを作成するならChromeモバイル･エミュレーターで約「280px～6000px」解像度ぐらいのチェックが必要になるので、Chromeモバイル･エミュレーターぐらい使えないようではフロントエンド(プロ)は無理と思って下さい。
フロントエンド(プロ)を目指さない場合でも「欠陥Webページ、レスポンシブ･デザイン」のチェックにはChromeモバイル･エミュレーターが必要になるので、とりあえずChromeモバイル･エミュレーターぐらい使えるようにしましょう。
テスト的なチェックならEdgeモバイル･エミュレーターでも おｋ。
テレビ画面の「4k画面、8k画面」ぐらいは聞いたことは有りますよね？
下記はテレビ画面のHD(ハイビジョン)以降の規格(解像度)です。
今どきの若い人はHD(ハイビジョン)など知らないかもしれませんが。
ただしPCモニターの解像度は、テレビ画面のような正式な規格と言う訳では無いですが。
//images.app.goo.gl/ZQctd4Rb7AorGsNp6
【重要】
その『Chromeモバイル・エミュレーターの使い方』は中高生レベルの読解力が有れば、何回か読めば理解できる程度の難易度なのですから、【ダメダメ･デモ】を実際にChromeモバイル･エミュレーターでチェックしてみて下さい。
重要なので、すぐにでもトライしてみて下さい。
何故か、殆どの人は真面目に読もうとしないですよね(その程度の事ぐらい真面目に やってくれよって話しですが)。
