CSS logo 響應是現代網站設計中非常重要的一部分。一個好的響應式設計可以讓網站在不同的設備上具有最佳的表現。

@media only screen and (max-width: 767px) {
.logo {
font-size: 2rem;
margin-right: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.logo {
font-size: 3rem;
margin-right: 1rem;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.logo {
font-size: 4rem;
margin-right: 2rem;
}
}
@media only screen and (min-width: 1200px) {
.logo {
font-size: 5rem;
margin-right: 3rem;
}
}

通過使用 CSS 媒體查詢，我們可以輕松地實現一個響應式的logo，在不同的屏幕尺寸下，顯示不同的大小與位置。例如，在大屏幕上，我們可以使用更大的字體大小和更多的間距來讓logo更能吸引用戶的眼球。而在小屏幕上，我們可以選擇使用更小的字體大小和更少的間距，以便網站更容易被用戶訪問。