Twitter Bootstrap: Hinzufügen von Medienabfragen für xxs Breakpoint

Question

Ich war überrascht, dass Twitter Bootstrap keine Medienabfragen für den Aufbau einer angemessenen Website-Version für mobile Hochformatbildschirme hat.

Eine knifflige Sache ist es, die Breite eines "mobilen Portraits" zu definieren. Zuvor hatten die meisten Telefone 320px Bildschirmbreite, aber derzeit ist es am besten ratsam, Geräte schmaler als 375px zu zielen.

iPhone scren resolutions

Ich brauche mindestens .col-xxs-* Klassen mit einem Haltepunkt bei 375px Bildschirmbreite, ähnlich wie .col-xs-*. Dies kann CSS- oder SCSS-Code sein. Ich benutze Bootstrap-4-alpha, Hoffnungslösung wird auch für Bootstrap-3 funktionieren.

Answer 1

Sie hat nicht angegeben, welche iPhone Sie entwerfen für, so sind hier die meisten von ihnen die Ihnen helfen, begann

/* ----------- iPhone 4 and 4S ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

} 

/* ----------- iPhone 5 and 5S ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

} 

/* ----------- iPhone 6 ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

} 

/* ----------- iPhone 6+ ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) 
    and (orientation: portrait) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) 
    and (orientation: landscape) { 

} 

Answer 2

Einige Bootstrap-Gabeln bieten zusätzliche Haltepunkte in einer ziemlich solide Art und Weise. Dies scheint regelmäßig gewartet zu werden und funktioniert gut für mich:

SCSS: https://gist.github.com/Jakobud/c057577daddbde4dd709

// Mid-Small breakpoint 

$screen-ms: 480px !default; 
$screen-ms-min: $screen-ms !default; 
$screen-ms-max: ($screen-sm-min - 1) !default; 

// Redefined Extra Small max value (Can't override non-default variables in SASS) 
$screen-xs-max-new: ($screen-ms-min - 1) !default; 

// Common styles (see make-grid-columns() in bootstrap/mixins/_grid-framework.scss) 

.col-ms-1, 
.col-ms-2, 
.col-ms-3, 
.col-ms-4, 
.col-ms-5, 
.col-ms-6, 
.col-ms-7, 
.col-ms-8, 
.col-ms-9, 
.col-ms-10, 
.col-ms-11, 
.col-ms-12 { 
    position: relative; 
    // Prevent columns from collapsing when empty 
    min-height: 1px; 
    // Inner gutter via padding 
    padding-left: ($grid-gutter-width/2); 
    padding-right: ($grid-gutter-width/2); 
} 

// Misc. class adjustments for col-ms 

@media (min-width: $screen-ms) and (max-width: $screen-ms-max) { 
    .container { 
    max-width: $screen-sm - 20px; 
    } 
    .hidden-xs { 
    display: block !important; 
    } 
} 

// col-ms grid 

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) { 
    @include make-grid(ms); 
} 

// Visibility utilities 

@include responsive-invisibility('.visible-xs, .visible-ms'); 

.visible-xs-block, 
.visible-xs-inline, 
.visible-xs-inline-block, 
.visible-ms-block, 
.visible-ms-inline, 
.visible-ms-inline-block { 
    display: none !important; 
} 

@media (max-width: $screen-xs-max-new) { 
    @include responsive-visibility('.visible-xs'); 
} 
.visible-xs-block { 
    @media (max-width: $screen-xs-max-new) { 
    display: block !important; 
    } 
} 
.visible-xs-inline { 
    @media (max-width: $screen-xs-max-new) { 
    display: inline !important; 
    } 
} 
.visible-xs-inline-block { 
    @media (max-width: $screen-xs-max-new) { 
    display: inline-block !important; 
    } 
} 

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) { 
    @include responsive-visibility('.visible-ms'); 
} 
.visible-ms-block { 
    @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) { 
    display: block !important; 
    } 
} 
.visible-ms-inline { 
    @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) { 
    display: inline !important; 
    } 
} 
.visible-ms-inline-block { 
    @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) { 
    display: inline-block !important; 
    } 
} 

@media (max-width: $screen-xs-max-new) { 
    @include responsive-invisibility('.hidden-xs'); 
} 

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) { 
    @include responsive-invisibility('.hidden-ms'); 
} 

WENIGER: https://gist.github.com/wdollar/135ec3c80faaf5a821b0

Answer 3

In Bootstrap 4 können Sie einfach einen neuen Haltepunkt hinzufügen, indem Sie die $grid-breakpoints -variable . Ursprünglich ist es:

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

Durch sie

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

Ändern würden Sie einen neuen Haltepunkt xxs hinzufügen. Aber ich würde eine 2-Zeichen-Kennung, so etwas wie ms für „medium-small“ empfehlen:

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

In TWBS3 ist es nicht so einfach - es wird Sie den Code zu knacken hat.

Answer 4

können Sie fügen Sie einen neuen Haltepunkt BS 4 durch die $grid-breakpoints und $container-max-widths Variablen mit SASS ändern.

/* 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

-Update 2018: Nun, da die xs- Infix hat in Bootstrap 4, das Hinzufügen eines neuen kleineren XXS Unterbrechungsmittel entfernt worden ist, dass diese unterste Haltepunkt keine Infix hat. Zum Beispiel:

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

Hinweise zum Anpassen von Bootstrap SASS verwenden, von den docs ...

einem der Sass Variablen und Karten ändern in Ihrem custom.scss .... Jede Sass-Variable in Bootstrap 4 enthält die!Standard-Flag erlaubt Sie überschreiben den Standardwert der Variablen in Ihrem eigenen Sass ohne Bootstrap Quellcode zu modifizieren. Kopieren und fügen Sie Variablen nach Bedarf ein, ändern Sie ihre Werte, und entfernen Sie das Standardkennzeichen. Wenn eine Variable bereits zugewiesen wurde, wird sie nicht durch die Standardwerte in Bootstrap neu zugewiesen.