1.上下左右居中
.rule {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
}
.rule .rule_box {
/* width: 5.89rem; */
width: 5.27rem;
height: 4.77rem;
background-color: #ffffff;
border-radius: 0.16rem;
/* margin: 0.4rem auto 0; */
top: 0;
bottom: 0;
left: 1.115rem;
margin: auto;
overflow: hidden;
position: absolute;
}
2.ios微信浏览器 点击input框完成之后页面不下来问题（scrollTop为0）
window.scrollTo(0, document.body.scrollTop + 1);
document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);
3.点击弹框之后滑动 背景层跟着滑动
点击显示时添加一个类：
$('body').addClass('fancybox-lock-test');
点击隐藏时删除这个类：
$('body').removeClass('fancybox-lock-test');
类的样式：
.fancybox-lock-test {
overflow-y: hidden;
/*为了兼容普通PC的浏览器*/
height: 100%;
position: fixed;
}
4.rem
document.documentElement.style.fontSize = document.documentElement.clientWidth * 100 / 750 + "px";
window.addEventListener("resize", function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth * 100 / 750 + "px"
}, false)
5.响应式布局
（1）pc端平常怎么写就怎么写
（2）移动端@media screen and (max-width: 768px) {}
布局：
用百分比布局
字号：
移动端px是pc端px的一半 或者用vw vh
网友评论