自适应
使网页能适应不同终端设备的技术。原理是通过检测视口分辨率来判断是什么终端的,PC,手机还是平板。
做自适应的网页时,需要在代码中加入“祖传代码”,即通用代码。
这是在头部head引入的:
分别代表的意思是:
initial-scale=1.0 :初始缩放比例为1.0(原始大小),这句代码的目的还不是放置用户 缩放的
minimum-scale=1.0 :网页最小的缩小比例为1.0(原始大小),设置这句代码的目的是为 了放置某些程序(比如JS)无意中修改了网页的缩小比例
maximum-scale=1.0 :网页最大的放大比例为1.0(原始大小),设置这句代码的目的是为 了放置某些程序(比如JS)无意中修改了网页的放大比例
user-scalable=0 :这句代码才是不允许用户对网页进行缩放
!(function (win, doc) {
function setFontSize() {
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 1262) * 100+ 'px';
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function (e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
setFontSize();
}(window, document));
这是必要的script代码
其中红色字体为设计稿的宽度和比例,定义不同的大小时,需要更改。