【前端知识体系-CSS相关】Bootstrap相关知识,相关知识
3672Js.Com2019-11-20 00:01 来源:未知 阅读:12540 关注度4
【前端知识体系-CSS相关】Bootstrap相关知识,相关知识
1.Bootstrap 的优缺点?
- 优点:CSS代码结构合理,现成的代码可以直接使用(响应式布局)
- 缺点:定制流程较为繁琐,体积大
2.如何实现响应式布局?
- 原理:通过media query设置不同分辨率的class
- 使用:为不同分辨率选择不同的class
3.如何定制自己的bootstrap样式?
4.如何实现一个响应式布局框架?
[!NOTE]
面试常考考点,要求模拟实现boostrap的底层实现原理。
上面的[!NOTE]是行匹配模式,默认情况下支持类型NOTE,TIP,WARNING和DANGER。
4.1 JS的模拟实现
<style>
.container{
height: 40px;
margin: 0 auto;
background-color: rebeccapurple;
}
</style>
<div class="container"></div>
<script>
window.addEventListener("load", function () {
// 1. 获取容器
let container = document.querySelector(".container");
let clientW = 0;
resize();
// 2. 监听窗口的大小变化
window.addEventListener("resize", resize);
function resize() {
// 2.1 获取改变后的宽度
clientW = window.innerWidth;
// 2.2 判断
if(clientW >= 1200){ // 超大屏幕
container.style.width = "1170px";
}else if(clientW >= 992){ // 大屏幕
container.style.width = "970px";
}else if(clientW >= 768){ // 小屏幕
container.style.width = "750px";
}else { // 超小屏幕
container.style.width = "100%";
}
}
});
</script>
4.2 CSS的模拟实现
<style>
.container{
height: 40px;
margin: 0 auto;
background-color: rebeccapurple;
}
/*媒体查询*/
@media screen and (max-width: 768px){
.container{
width: 100%;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
.container{
width: 750px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
.container{
width: 970px;
}
}
@media screen and (min-width: 1200px){
.container{
width: 1170px;
}
}
</style>
<div class="container"></div>
[!NOTE]
关键点:mediaQuery, 浮动,响应式布局,resize事件
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭