$primary: greed; @import './botstrap-custom/scss/bootstrap.scss'
[!note]
面试常考考点,要求模拟实现boostrap的底层实现原理。
上面的[!note]是行匹配模式,默认情况下支持类型note,tip,warning和danger。
<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>
<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事件
如对本文有疑问, 点击进行留言回复!!
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
CSS3 input框的实现代码类似Google登录的动画效果
CSS 容器背景 10 种颜色渐变Demo(linear-gradient())
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
网友评论