引导程序和大屏幕

Posted 2023-03-06

【中文标题】引导程序和大屏幕

【英文标题】：Bootstrap and large screens

【发布时间】：2016-04-03 06:29:34

【问题描述】：

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

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

所以我的问题是人们如何在不为每个屏幕尺寸编写 1000 行代码的情况下使用引导程序处理大屏幕。

【问题讨论】：

你试过使用 col-lg-12 吗？看到这个回复：http://***.com/questions/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap

Col lg 是的，但它不适用于按钮

还有 btn-lg 吗？ （对于 Bootstrap 3 中的按钮）您还可以使用 btn-block 类。检查主容器的填充或边距

有什么办法可以将 boostrap 默认的 14px 字体大小改为 1em 16px？

当然，尝试覆盖默认的 Bootstrap CSS，或者使用 LESS 或 SASS 修改文件（更好）。

【参考方案1】：

他们是这样做的：他们在他们可能拥有的任何框架之上进行您自己的媒体查询。

您可以以我的网站为例：calumchilds.com。我使用 vw 测量值，这意味着一旦屏幕宽度超过某个宽度（在我的网站上，我将其设置为 2100 像素 - 如果您有兴趣，代码在答案的末尾），文本大小基于视口宽度，使用测量值vw。比如我的<h2>在正常大小的屏幕上通常是32px，但在大屏幕上，文字大小是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;

【参考方案2】：

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

【讨论】：

问题是它完全基于 px。所以你必须覆盖页面上的所有元素。然后它就失去了快速发展的目的。

【参考方案3】：

充分利用网格系统

https://getbootstrap.com/examples/grid/