ページをモバイル対応にしますか?

Question

私はたくさんの Web ページといくつかの Web サイトを持っています。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ、スケールダウンし、モバイル対応にする方法がわかりません。たとえば、これは私のページとサイトの 1 つですが、ズームインとズームアウトに関していくつかの小さな問題があり、まったくモバイルフレンドリーではないことがわかります:

https://mitkovtori.github.io/

https://mitko-vtori-world.github.io/Mitko-Vtori-World/

それでは、すべてのサイズで問題を解決する方法、またはモバイル デバイスなどで問題を再作成する方法はあるのでしょうか?

サイズを表すためにパーセンテージ「%」を使用してみました。例:

<width="25%">

ピクセル「25px」も使ってみました。 数字は「25」のみ。

しかし、何をしても、ズームイン、ズームアウト、デバイスの移動では常に問題が発生します。

コードは 100% オープンソースなので、私のクソコードを一周して、どこが間違っていたのかを見つけてください。

最初に共有した 2 つの Web サイトのリポジトリ: https://github.com/MitkoVtori/MitkoVtori.github.io

https://github.com/Mitko-Vtori-World/Mitko-Vtori-World

Answer 1

メディア クエリを使用します。たとえば、画面サイズを 1023 ピクセル未満にスタイル設定したい場合は、CSS ファイルの下部に次のコンテンツを追加する必要があります。 リーリー

768 より低い値を希望する場合は、もう一度実行してください。 リーリー

大画面と小画面に対応した同様のモード