使頁面適合行動裝置嗎？

Question

我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的 html5 和 css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中看到放大和縮小時存在一些小問題，而且根本不適合行動裝置：

https://mitkovtori.github.io/

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

那麼，有沒有辦法修復所有尺寸的問題，或者為行動裝置重新創建等等？

我嘗試使用百分比「%」來表示尺寸，例如：

<width="25%">

我也嘗試過使用像素「25px」。 只有數字“25”。

但無論我做什麼，放大、縮小和行動裝置總是會出現問題。

程式碼是100%開源的，所以你可以繞過我的垃圾程式碼並嘗試找出我的錯誤在哪裡。

我在開頭分享的兩個網站的儲存庫： https://github.com/MitkoVtori/MitkoVtori.github.io

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

#

Answer 1

使用媒體查詢，例如，如果您想以低於 1023px 的螢幕尺寸設定樣式，則需要在 css 檔案底部新增以下內容

@media(max-width:1023px){ 
   /* your code will be here */
   .navbar{
        padding: 10px 15px;
    }
}

如果您想要低於 768，請再次

@media(max-width:768px){ 
       /* your code will be here */
       .navbar{
            padding: 10px 15px;
        }
    }

大螢幕和小螢幕的類似模式