如何調整手機版wordpress網站的標誌大小？

Question

我一直在嘗試調整我們網站的標誌（https://jodhpurhomeservices.com/）在移動電話上查看時，但沒有代碼似乎工作。我試過不同的版本，但無濟於事：

@media (max-width: 360px) { 
 
    .site-branding img { 
 
     max-width: 50%; 
 
     max-height: 50%; 
 
    } 
 
}

我不知道該怎麼調整，或者我應該使用哪個CSS代碼？我並不想在桌面視圖上改變任何東西。只需移動。

將不勝感激任何反饋。

Answer 1

該代碼看起來不錯。它只能用於360px以下的分辨率，或者如果需要可以將其更新爲767，因爲低於ipad的分辨率，它只是移動的。所以你不需要添加最大高度。只有這段代碼才能幫到你。您可以更新您選擇的分辨率。我檢查你的網站這個CSS代碼不存在。

@media (max-width: 767px) { 
    .site-branding img { 
    max-width: 50%; 
    } 
} 

Answer 2

您的網站似乎使用優化插件，考慮添加你的CSS代碼，自定義CSS部分或主題的CSS文件中看到效果後清除緩存。

你只需要定義寬度或最大寬度，高度可以自動照顧。

@media (max-width: 360px) { 
    .site-branding img { 
     max-width: 50%; 
     height: auto; 
    } 
}  

Answer 3

我認爲它應該，但你上面的風格似乎並不適用https://jodhpurhomeservices.com/可以提高媒體查詢如下

@media only screen and (max-device-width: 480px) { 

} 

正如上傳，因爲我想在這裏https://jodhpurhomeservices.com/wp-content/cache/autoptimize/css/autoptimize_8c2977c29238748881af21a29e97e157.css你確定你的CSS，但我沒有找到site-branding的媒體查詢。

Answer 4

請針對不同的屏幕尺寸嘗試以下代碼。

@media (max-width: 767px) { 
    .site-branding a img { 
     width: 50%; 
    } 
} 
@media (max-width: 360) { 
    .site-branding a img { 
     width: 23%; 
    } 
} 

您可能不需要767px代碼，但上面的代碼將減少百分比（％）寬度它會看起來很奇怪的767px時，在該屏幕的大小。