Question

所以我开始使用Boostrapp并且我在大屏幕上尝试了它，看起来它已经缩小了。在平板电脑和笔记本电脑上它的分辨率为1280，但在1960年它已经缩小了。

在使用boottrap之前，我用em单位解决了这个问题，只是使字体大小更大，例如媒体屏幕1600为105％，媒体屏幕1900为110％。我的所有按钮，表格，标题都会调整。但这在bootstrap中不起作用。

所以我的问题是人们如何处理带有引导程序的大屏幕而不为每种屏幕尺寸编写1000行代码。

Answer 1

使用网格系统为您带来优势

Answer 2

Bootstrap已经在库中添加了媒体查询。要使其工作，请遵循引导指南。就像为每个容器使用适当的网格类一样（col-lg-12，col-md-12，col-sm-12）。对于每个UI元素，Bootstrap都有适当的样式类。如果要修改任何内容，请尝试创建一些像bootstrap.override.css这样的文件来覆盖css类或样式。最后，最好先阅读bootstrap准则。

Answer 3

以下是他们如何做到这一点：他们在他们可能拥有的任何框架之上进行自己的媒体查询。

您可以将我的网站视为示例：calumchilds.com。我使用vw测量，这意味着一旦屏幕宽度超过一定宽度（在我的网站上，我将其设置为2100px - 如果您感兴趣，代码在答案的末尾），文本大小基于视口宽度，使用测量vw。例如，我的<h2>在正常大小的屏幕上通常为32像素，但在大屏幕上，文本大小为4vw。您可以对按钮，表单等进行vw测量。

只需使用您自己的屏幕或Google Chrome开发工具（我使用后者）来测试尺寸。如果您有任何疑问，请随时在下方发表评论。

@media screen and (min-width: 2100px) {
h1 {
    font-size: 5vw !important;
}
h2 {
    font-size: 4vw !important;
}
h3 {
    font-size: 3vw !important;
}
h4 {
    font-size: 2vw !important;
}
h5 {
    font-size: 1vw !important;
}
h6 {
    font-size: 0.5vw !important;
}
body, p, button, .button, .topnav a, label, input, textarea, .socialmediaprofiles a, .social-media {
    font-size: 1.75vw !important; 
}
.topnav a {
    padding: 16% 32%;
}
button, .button {
    padding: 0.5em 1em !important;
    border-width: 0.2vw !important;
}

}

Bootstrap和大屏幕

3 个答案: