Twitter Bootstrap:为xxs断点添加媒体查询 [英] Twitter Bootstrap: add media queries for xxs breakpoint

问题描述

令我惊讶的是，Twitter Bootstrap没有媒体查询来为移动人像屏幕构建适当的网站版本.

I was surprised that Twitter Bootstrap does not have media queries for building an adequate website version for mobile portrait screens.

一件棘手的事情是定义移动人像"宽度.以前，大多数手机的屏幕宽度为320px，但目前最可取的做法是定位比375px小的设备.

A tricky thing is to define "mobile portrait" width. Previously most phones had 320px screen width, but currently most advisable is to target devices narrower than 375px.

iPhone屏幕分辨率

我至少需要具有375px屏幕宽度断点的.col-xxs-*类，类似于.col-xs-*.这可以是CSS或SCSS代码.我正在使用Bootstrap-4-alpha，希望解决方案也适用于Bootstrap-3.

I need at least .col-xxs-* classes with a breakpoint at 375px screen width, similar to .col-xs-*. This can be CSS or SCSS code. I'm using Bootstrap-4-alpha, hope solution will work for Bootstrap-3 too.

推荐答案

您可以通过使用SASS更改$grid-breakpoints和$container-max-widths变量，向BS 4 添加新的断点.

You can add a new breakpoint to BS 4 by changing the $grid-breakpoints and $container-max-widths variables with SASS.

    /* your _custom.scss */

    @import "bootstrap/functions";
    @import "bootstrap/variables";
    @import "bootstrap/mixins";

    $grid-breakpoints: (
      xxs: 0,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    $container-max-widths: (
      xxs: 375px,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    @import "bootstrap";

http://codeply.com/go/mPS4Yros4U

更新2018 :现在，在Bootstrap 4中已删除了xs-缀，添加了一个新的较小的xxs断点意味着该最低的断点没有任何缀.例如:

Update 2018: Now that the xs- infix has been removed in Bootstrap 4, adding a new smaller xxs breakpoint means that this lowest breakpoint has no infix. For example:

col-6 (50% on xxs)
col-xs-6 (50% on xs)

有关从文档使用SASS定制Bootstrap的说明 ...

修改您的 custom.scss ...中的任何Sass变量和映射.Bootstrap 4中的每个Sass变量都包含！default标志， 您可以在自己的Sass中覆盖变量的默认值，而无需 修改Bootstrap的源代码.根据需要复制和粘贴变量， 修改其值，并删除！default标志.如果一个变量有 已经分配，​​那么默认情况下不会重新分配 Bootstrap中的值.

Modify any of the Sass variables and maps in your custom.scss.... Every Sass variable in Bootstrap 4 includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.

这篇关于Twitter Bootstrap:为xxs断点添加媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！