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的一些指南。

要制作“响应式”内容，一般，您需要使用基于百分比的值。

e.g。

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

这将使图像增长到其父级的宽度。由于您没有静态设置固定宽度，因此在调整大小时它也会缩小。

BOOTSTRAP 4和@include media-breakpoint-up

1 个答案: