移动端自适应代码

<script>
		//屏幕适应
		(function (win){
            if (!win.addEventListener) return;
            var html=document.documentElement;
            function setFont(){
                var cliWidth=html.clientWidth;
                html.style.fontSize=100*(cliWidth/1334)+'px';
            }
            win.addEventListener('resize',setFont,false);
            setFont();
        })(window);
    </script>

--------------------会出现由小到大------------------

/

/屏幕适应
(function (doc, win) {
    var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
 //屏幕适应
    var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, resize, false);//添加屏幕旋转事件
    function resize(bol) {
        var html = document.documentElement;
        setTimeout(function(){
            document.getElementById('wrap').style.zoom = html.clientWidth/667;
        },100);

    }
    resize(true);
  //适配750
    (function (win,doc){
        if (!win.addEventListener) return;
      var html=document.documentElement;
      function setFont()
      {
        var cliWidth=html.clientWidth;
        html.style.fontSize=100*(cliWidth/750)+'px';
      }
      win.addEventListener('resize',setFont,false);
      setFont();
    })(window,document);
/*横竖屏判断*/
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {  
    if (window.orientation === 180 || window.orientation === 0) {   
       //alert('竖屏状态!');  
        location.reload() ;
    }   
    if (window.orientation === 90 || window.orientation === -90 ){   
        //alert('横屏状态!'); 
         location.reload() ;
    }    
}, false);   


window.addEventListener("orientationchange",function(){  
        //console.log(window.orientation);   
        window.location="index.html";
      
});
//屏幕适应
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, resize, false);//添加屏幕旋转事件
function resize(bol) {
	var html = document.documentElement;
	html.style.fontSize = html.clientWidth /750*100 + "px";
}
resize(true);
//屏幕适应

<script>
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    document.documentElement.style.fontSize = (w / 750 * 100) + 'px';
    window.onresize = function () {
        var w = document.documentElement.clientWidth || document.body.clientWidth;
        document.documentElement.style.fontSize = (w / 750 * 100) + 'px'
    } 
</script> 
<script>
//屏幕适应
(function (doc, win) {
    var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);	
</script>
 //屏幕适应
    var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, resize, false);//添加屏幕旋转事件
    function resize(bol) {
        var html = document.documentElement;
        setTimeout(function(){
            document.getElementById('wrap').style.zoom = html.clientWidth/667;
        },100);

    }
    resize(true);

```bash
//屏幕适应 
  (function (win,doc){
        if (!win.addEventListener) return;
      var html=document.documentElement;
      function setFont()
      {
        var cliWidth=html.clientWidth;
        html.style.fontSize=100*(cliWidth/750)+'px';
      }
      win.addEventListener('resize',setFont,false);
      setFont();
    })(window,document);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值