想要有全屏滚动的banner,以及全屏图片,增加剪切效果。
但是iphone456的尺寸都不一样,如何适配呢,android更是头疼
拉伸图片会导致图片变形失真,有没有不用拉伸的办法呢
将图片做为背景,然后设置background-size;对于容器的宽、高可以考虑用rem单位,然后动态计算html标签的font-size值;
//- 设置html标签font-size
(function (doc, win) {
var _root = doc.documentElement,
resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
resizeCallback = function () {
var clientWidth = _root.clientWidth,
fontSize = 20;
if (!clientWidth) return;
if(clientWidth < 640) {
fontSize = 20 * (clientWidth / 320);
} else {
fontSize = 20 * (640 / 320);
}
_root.style.fontSize = fontSize + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvent, resizeCallback, false);
doc.addEventListener('DOMContentLoaded', resizeCallback, false);
})(document, window);
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。