关于bootstrap响应式布局,国内外名气满满的前端样式布局框架。3.0之前版本都采用less动态css预处理语言,实现机制是通过@media媒介查询来达到样式控制。
例如:
@media screen and (min-width:320px) and(max-width:360px){
html{
width:30px;
height:20px;
}
}
通过一系列规定好的宽高,屏幕处于什么范围,导航栏显示几个,每个内容块宽高多少。是的,你没看错,bootstrap3.0之前都是使用px作为单位,但是从4.0开始便使用rem作为单位。
如果你项目使用rem,那么直接上bootstrap 4.0比较合适。
以下是bootstrap.css相关代码
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
在研究bootstrap之前,我一直以为它使用的是rem单位,而不是px。真相原来是bootstrap 4.0才开始使用rem,希望大家不要像我一样想当然咯。
而我们使用rem方式,大体类似,当然这里没有研究bootstrap 4.0,因为它变成sass动态语言,本人目前打算先搞懂less。给出个人以前使用方式,结合font-size值。
rem默认对应font-size是16px,但如果你自己赋值,就应该做相应计算。
@media screen and (max-width:319px){
html{
font-size: 16px;
}
}
@media screen and (min-width:320px) and(max-width:360px){
html{
font-size: 21.5px;
}
}
@media screen and (min-width:361px) and(max-width:415px){
html{
font-size: 28px;
}
}
@media screen and (min-width:416px) and(max-width:767px){
html{
font-size: 48px;
}
}
img{width:14.825rem;height: 10.667rem;}
再使用rem之前,我们一般会使用设计稿,一般是750px,针对移动端。然后我们就现在750px模式下布局好,然后根据公式换算,将px换成rem。这里其实可以使用插件,less sass等公式计算。
当然,你也可以使用js进行屏幕判断,计算。具体的,下次有时间研究在写个笔记。
PS:觉得自己文笔好差,做笔记都不知道些什么。只能说,坚持坚持在坚持,努力努力在努力。