最近一周写了一个pc端自适应的下载推广页面。
第一次做自适应的页面，在此记录一些体会。
首先我拿到的AI设计图纸是1920*1080的分辨率的。
和普通的定宽页面相比，在自适应的页面中，宽度设定为100%，高度需要通过js调节，通过获取视口的高度。再为每一个整屏页面赋值。在项目中我设定页面的最小高度为600px。pc端大概也没有分辨率低于这个数字的了吧。
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
if (height < 600) height = 600
然后页面中在布局的时候需要将1080p下的分辨率转化为rem。然后通过css的@media修改页面的基础font-size从而达到目的。
@media screen and (max-width: 1024px) {
html {
font-size: 62.5% !important;
}
}
图片的部分，注意background-size要使用contain属性。然后每一页要设置好底色。为了保证在类似1000*1400的比例下还能达到一屏一页的效果。图片容器的高度可以设置成100%，然后通过background的size和position属性使其居中。这样就会有一个不错的效果。
最后，为了达到页面整屏滚动的目的。再使用js。
$(document).ready(function () {
reloadHeight()
var isfinish = true
var scrollFunc = function () {
var height = getHeight()
// 当前页面为第X页面 为防止页面刚好超过1.2px。
var level = Math.floor((window.pageYOffset+20)/height)
var newScrollTop
if (event.wheelDelta < 0) {
if (level === 4) return
level += 1
} else {
if (level === 0) return
level -= 1
}
if (isfinish) {
isfinish = false
newScrollTop = level * height
$("html, body").animate({
scrollTop: newScrollTop + ‘px‘
}, 400, function () {
isfinish = true
})
}
}
$(this).on("mousewheel", scrollFunc)
})
调试的时候发现在chrome下，一次滚动会触发多个mousewheel事件。于是利用isfinish控制。
$("html, body").animate（）在IE下用html，chrome下用body。还不知道为什么。
然后这个整屏滚动的效果，本来用js写的，但是效果很捉急，然后换了jquery的animation，效果稍微好一点，但是其实还是很捉急，尤其是在IE下面。。