Bootstrap4 手机和PC端 前端适配

前言

因为正好接手到这个项目，网站使用的是 Bootstrap4.5.0的库，之前用的一直是 3.x 的库这边记录一下遇到的坑。

先附上Bootstrap4官方文档

简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网

(顺便吐槽一下，这个说是中文文档，就一个标题和少部分内容翻译了，其余还是中文。不过也好正好顺便锻炼下英语的阅读水平)

一.栅格系统

官方文档中是这么写的

目测和原来的区别就是多了一个 .col-* 适配小于576px的更小屏幕 和一个 .con-xl 适配更大屏幕

二.响应式工具

这个是用来让某些元素在固定的屏幕中显示\隐藏，比较方便

这个坑是怪我英语不好没有好好看新的文档导致的

3.x的官方文档是这样说的

---

从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

类组	CSS display
.visible-*-block	display: block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;

因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。

---

4.0 的官方文档是这样说的

---

Responsive utilities

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

Our responsive utility classes have largely been removed in favor of explicit display utilities.

• The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
• All .hidden- classes have been removed, save for the print utilities which have been renamed.
  • Removed from v3: .hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • Removed from v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Print utilities no longer start with .hidden- or .visible-, but with .d-print-.
  • Old names: .visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print
  • New classes: .d-print-block, .d-print-inline, .d-print-inline-block, .d-print-none

Rather than using explicit .visible-* classes, you make an element visible by simply not hiding it at that screen size. You can combine one .d-*-none class with one .d-*-block class to show an element only on a given interval of screen sizes (e.g. .d-none.d-md-block.d-xl-none shows the element only on medium and large devices).

Note that the changes to the grid breakpoints in v4 means that you’ll need to go one breakpoint larger to achieve the same results. The new responsive utility classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.

---

简单概括就是所有.hidden- 类已经废弃了，难怪没有用，随后就按照文档改成了 d-*-none 也一样使用的。

三.Media Queries的自适应

css3的新特性。直接写在css文件中覆盖默认的样式，在指定小于的宽度后就能显示，当然也可以有多个尺寸依次来填写，这个方法在bootstrap的源码中也是类似的写法。

.video-area h3 {
    font-size: 25px;
}

@media screen and (max-width: 576px) {//屏幕小于576px 时会覆盖原样式
    .video-area h3 {
        font-size: 18px;
    }
}

@media screen and (max-width: 400px) {//屏幕小于400px 时会覆盖原样式
    .video-area h3 {
        font-size: 14px;
    }
}

四.苹果设备和webkit内核等的字体适配

这个地方在bootstrap源码中也有默认的兼容性写法如下：

body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

随后测试过程中不知道为啥safari浏览器的加粗特别明显，Mozilla和webkit显示非常统一，就它搞特殊。因为手边没有苹果设备，只能发给同事调。这边我用了个简单的办法：font-weight: 500;这样会有一丢丢加粗，显示效果都还统一。到时候有了新的办法我再更新此博客。