移动适配建议

[luvletter2333]

目前默认的宽度是>=1280px，是在

.main-container {
  width: 80%;
  min-width: 1024px;
  max-width: 1366px;
  ...
}

中定义的 （1024px / 0.8 = 1280px）
所以为<=1280px宽度的屏幕做适配是必须的
建议的分界标准：来自Bootstrap 3

@media (max-width: 768px) { 

}

@media (min-width: 769px) and (max-width: 992px) { 

}

@media (min-width: 993px) and (max-width: 1280px) { 

}

[luvletter2333]

突然发现 BootStrap4 中Guid System有所变化:https://v4.bootcss.com/docs/layout/grid/#grid-options

@media (max-width: 576px) { 

}

@media (min-width: 577px) and (max-width: 992px) { 

}

@media (min-width: 993px) and (max-width: 1280px) { 

}

这样适配可能会更好
<=576的专门为手机版做
576~992的为Pad类产品做
992~1280的为窄屏幕做（其实改一下max-width就行了wjd）

默认的为宽屏幕

[Suzichen]

突然发现 BootStrap4 中Guid System有所变化:https://v4.bootcss.com/docs/layout/grid/#grid-options

@media (max-width: 576px) { 

}

@media (min-width: 577px) and (max-width: 992px) { 

}

@media (min-width: 993px) and (max-width: 1280px) { 

}

这样适配可能会更好
<=576的专门为手机版做
576992的为Pad类产品做
9921280的为窄屏幕做（其实改一下max-width就行了wjd）

默认的为宽屏幕

根据实际测试，宽度<1024时才会影响观看，
由于目前没有pad设计图，所以暂时将小于1024的屏幕全部适配为移动样式。

随后也会抽空适配一下宽度576以上的样式，暂定的方法是把侧栏设置为可收缩，看效果如何

[luvletter2333]

酷 576到1024应该是类似于电脑小窗口的大小 可以参考一下 Suzichen <[email protected]> 于 2020年3月23日周一 22:44写道：

…

突然发现 BootStrap4 中Guid System有所变化: https://v4.bootcss.com/docs/layout/grid/#grid-options @media (max-width: 576px) { } @media (min-width: 577px) and (max-width: 992px) { } @media (min-width: 993px) and (max-width: 1280px) { } 这样适配可能会更好 <=576的专门为手机版做 576992的为Pad类产品做 9921280的为窄屏幕做（其实改一下max-width就行了wjd） 默认的为宽屏幕 根据实际测试，宽度<1024时才会影响观看， 由于目前没有pad设计图，所以暂时将小于1024的屏幕全部适配为移动样式。 随后也会抽空适配一下宽度576以上的样式，暂定的方法是把侧栏设置为可收缩，看效果如何 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHQEPQXVFR6U5GN4KXP65CLRI5YUZANCNFSM4LOQON2Q> .