zoukankan      html  css  js  c++  java
  • 移动端响应式布局,rem动态更新

    (function(){
    	var fontSizeMatchDeviceWidth = function(){
    		var deviceWidth = document.documentElement.clientWidth || window.screen.width || 320,
    			devicePixelRatio = window.devicePixelRatio || 1,
    			fontSize = (Math.ceil(deviceWidth * 16 / 320)),
    			scale = 1 / devicePixelRatio; // 默认的缩放
    			
    		document.documentElement.style.fontSize = fontSize + 'px';
    		document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='+'scale'+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no,viewport-fit=cover'); // 增加viewport-fit=cover适配iphone x
    	};
    	
    	(function(){
    		var ua = navigator.userAgent;
    		if(/android/i.test(ua) || /ipad|itouch|iphone/i.test(ua)|| /tianqi/i.test(ua)){
    			fontSizeMatchDeviceWidth();
    		} else { // pc端优雅降级
    			document.documentElement.style.fontSize = '24px';
    		}
    	})();
    })();
    

      

  • 相关阅读:
    idea 相关
    dns 相关
    bash 相关
    建造者模式(Builder)
    C#中out 及 ref 区别
    C# 2.0新特性
    Asp.net.Ajax控件学习
    装饰模式(Decorator Pattern)
    职责链模式(Chain of Responsibility Pattern)
    面向对象
  • 原文地址:https://www.cnblogs.com/feixiablog/p/9737480.html
Copyright © 2011-2022 走看看