zoukankan      html  css  js  c++  java
  • 移动端使用rem,进行移动端自适应

    (function(win){
    	var docEl = win.document.documentElement;
    	var timer = '';
    	function changeRem(){
    		var width = docEl.getBoundingClientRect().width;
    		if (width > 540)//最大宽度,若果兼容到ipad的话把这个去掉就行
    		{
    			width = 540;
    		}
    		var fontS = width/10;//把设备宽度10等分 等同于用vw来做
    		docEl.style.fontSize = fontS + "px";
    	}
    	//页面尺寸发生改变的时候就再执行changeRem
    	win.addEventListener("resize",function(){
    		clearTimeout(timer);
    		timer = setTimeout(changeRem,30);
    	},false);
    	//页面加载的时候,若果是调用缓存的话就再执行changeRem
    	win.addEventListener("pageshow",function(e){
    		if (e.persisted)//缓存
    		{
    			clearTimeout(timer);
    			timer = setTimeout(changeRem,30);
    		}
    	},false);
    	changeRem();
    })(window)
    
    /*移动端添加的meta属性*/
    <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">

    注意:根据设计人员给的图片尺寸,高度进行相应的修改,如640*1334的图,底部高度为98px;  按照320*667  CSS要设底部的高度为32/49=0.653rem

           因为是新手刚接触rem,就按照自己的理解来了,使用rem元素计算高度,计算不正确的话,请指正出来,谢啦!

  • 相关阅读:
    转:专题五线程同步——事件构造
    转:专题四线程同步
    转:专题三线程池中的I/O线程
    转:[C# 开发技巧]如何防止程序多次运行
    转:专题二线程池中的工作者线程
    转:专题一线程基础
    C# 设置按钮快捷键
    jmeter链接多台负载机报错
    java读取properties
    使用Runtime.getRuntime().exec()方法的几个陷阱
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/9075542.html
Copyright © 2011-2022 走看看