BOOTSTRAP 4和@include media-breakpoint-up

Question

我有一個關於使網站的幾個元素響應的最佳實踐的問題。

你認爲怎麼樣使用下面的例子：

#site-header-logo img { 

// Padding top right bottom left // 
padding: 0px 0px 0px 15px; 
width: 260px; 
height: 40px; 


} 

@include media-breakpoint-down(sm) { 
    #site-header-logo img { 
     width: 260px; 
     height: 40px; 
    } 
} 

或者例如是這樣的：

#site-header-logo-home { 

@include media-breakpoint-up(sm) { 
    @include make-col(4); 

} 
@include media-breakpoint-down(sm) { 
    @include make-col(12); 
} 
} 

你對此有什麼看法嗎？我發現這與Safari的例外。這是好的還是有任何其他選擇如何工作做類似的事情？

預先感謝您， 最好的問候， 路易斯

Answer 1

都不是。你的問題沒有經過深思熟慮......使用你所放的東西並沒有意義。我會高度建議您查看YouTube上有關Bootstrap的一些指南。

要做出「響應」，一般爲，您需要使用基於百分比的值。

例如

#site-header-logo img { 
// Padding top right bottom left 
padding: 0px 0px 0px 15px; 
width: 100%; 
height: auto; 
} 

這將使圖像增長到其父寬度。當您調整大小時，它也會縮小，因爲您沒有靜態設置固定寬度。

Answer 2

謝謝你的回答。也許這個問題沒有以正確的方式提出，但依然以我的觀點來看是有效的。

我們可以用百分比更改大小。但想象一下，我想在另一箇中斷點的背景上添加不同的顏色？

最好的問候， Luis