一些难处理的前端问题(经验)

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我有一个好“妈妈” 午休时间又到了,孩子们纷纷回到宿舍开始收拾卫生,准备午睡,走廊上又响起了查寝老师熟悉的声音,走...
    特立独行滴猪阅读 1,638评论 0 0
  • 王大祝 独自伫立江边。微闭上眼睛。任晚风梳理着乱发,轻吻我的脸庞,聆听江水的拍打。原来世界如此空旷,这般寂静,一切...
    皖南医学院阅读 2,515评论 0 0
  • 今天晚上听了正道的研讨,感觉并不好!也许是因为自我没成长吧,感觉这里疏远了很多,再也找不回那种感觉了吧,也就是所谓...
    美言君读阅读 1,872评论 0 0