- 首页 > it技术 > >
使用flexible自适应（单位换算）
px： 逻辑像素，绝对单位
em： 基准点为父节点字体的大小
rem： 相对根元素字体大小来计算在样式中设定
@function px($px, $rem: 75) {
@return $px / $rem * 1rem;
}
取用时只需调用px()即可使用媒体查询来兼容不同机型
1.什么是媒体查询?
通过@media来设置页面在不同屏幕大小下所显示/渲染的样式
2.怎么用？
首先要先知道你所做的页面需要的尺寸
max-width / max-height 网页显示区域小于等于设置的宽度
min-width / min-width 网页显示区域大于等于设置的宽度@media screen and (max-width:需要的最大尺寸) and (min-width:需要到什么尺寸为止显示这个样式) {
你的样式
}//可以通过写多个来适配不同的机型，也可以只写两个，来适配所有但是总不能页面变一点动一次吧？所以还需要有个函数防抖
1.什么是函数防抖？
就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
2怎么用？
防抖有两种
function debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
这种的触发事件后不会立即执行，而是过几秒再执行，如果在等待的时间中又触发了事件会重新开始计时function debounce(func,wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
}
另一种是立即触发事件，但是会在不触发事件后几秒才出现效果
推荐阅读
