Html-自适应

自适应

使网页能适应不同终端设备的技术。原理是通过检测视口分辨率来判断是什么终端的，PC，手机还是平板。

做自适应的网页时，需要在代码中加入“祖传代码”，即通用代码。

这是在头部head引入的：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

分别代表的意思是：

initial-scale=1.0 ：初始缩放比例为1.0（原始大小），这句代码的目的还不是放置用户 缩放的

minimum-scale=1.0 ：网页最小的缩小比例为1.0（原始大小），设置这句代码的目的是为 了放置某些程序（比如JS）无意中修改了网页的缩小比例

maximum-scale=1.0 ：网页最大的放大比例为1.0（原始大小），设置这句代码的目的是为 了放置某些程序（比如JS）无意中修改了网页的放大比例

user-scalable=0 ：这句代码才是不允许用户对网页进行缩放

<script>
        !(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>

这是必要的script代码

其中红色字体为设计稿的宽度和比例，定义不同的大小时，需要更改。

 

转载于:https://www.cnblogs.com/CccK-html/p/11338286.html