(function (doc, win) {

            // orientationchange:用户水平或者垂直翻转设备（即方向发生变化）时触发的事件;(屏幕大小发生变化)

            var docEl = doc.documentElement,

                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

                recalc = function () {

                    var clientWidth = docEl.clientWidth;//获取当前可视的宽度

                    if (!clientWidth) return;//不存在返回

                    if(clientWidth>=640){//大于640时字体设置

                        docEl.style.fontSize = '100px';

                    }else{//小于640时 可视宽度/640*100

                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

                    }

                };

            if (!doc.addEventListener) return;

            win.addEventListener(resizeEvt, recalc, false);

            doc.addEventListener('DOMContentLoaded', recalc, false);//是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。

        })(document, window);




 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

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

     <script>

     </script>

     <style>

         *{margin: 0;padding: 0;}

         #title{width: 100%;height: 2rem;background: deepskyblue;}

         #imgBox{width: 100%;height: 100%;}

         #imgI{display: block;width: 100%;height: auto;margin: 0 auto;}

         #imgI img{width: 100%;height: 100%;}

         #imgI1{display: block;width: 6.4rem;height: 3.3rem;margin: 0 auto;}

         #imgI1 img{width: 100%;height: 100%;}

     </style>

 </head>

 <body>

 <div id="title"></div>

 <div id="imgBox">

     <i id="imgI">

         <img src="/activity_mobile/img/aDG_banner.jpg">

     </i>

     <i id="imgI1">

         <img src="/activity_mobile/img/aDG_banner.jpg">

     </i>

 </div>

 </body>

 </html>


												


											
js 关于网易淘宝移动端适配的学习的更多相关文章
	

    
								
  1. 资深P7架构师详解淘宝服务端高并发分布式架构演进之路
		
    1. 概述 本文以淘宝作为例子,介绍从一百个并发到千万级并发情况下服务端的架构的演进过程,同时列举出每个演进阶段会遇到的相关技术,让大家对架构的演进有一个整体的认知,文章最后汇总了一些架构设计的原则. ...
    
		
    2. 
						
  2. vue2.0 类淘宝不同屏幕适配及px与rem转换问题
		
    因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没 ...
    
		
    3. 
						
  3. 手淘H5移动端适配方案flexible源码分析
		
    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
    
		
    4. 
						
  4. 淘宝网触屏版 - 学习笔记（0 - 关于dpr）
		
    注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name=&qu ...
    
		
    5. 
						
  5. 淘宝网触屏版 - 学习笔记（1 - 关于meta）
		
    注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. <meta charset="utf-8"> <meta cont ...
    
		
    6. 
						
  6. 手淘的移动端适配方案flexible
		
    基于 vue-cli 配置手淘的 lib-flexible + rem,实现移动端自适应 安装 flexible npm install lib-flexible --save 引入 flexible ...
    
		
    7. 
						
  7. js  实现仿  淘宝 五星评价   demo
		
    <style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.co ...
    
		
    8. 
						
  8. js运动 模仿淘宝幻灯
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    9. 
						
  9. 淘宝ios端弹窗-2020年3月25日
		
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 《SAS编程与数据挖掘商业案例》学习笔记之十八
			
    接着曾经的<SAS编程与数据挖掘商业案例>,之前全是sas的基础知识,如今開始进入数据挖掘方面笔记,本文主要介绍数据挖掘基本流程以及应用方向,并以logistic回归为例说明. 一:数据挖 ...
    
			
    2. 
						
  2. iOS 一个ViewController上显示2个tableView的方法
			
    1.在StoryBoard上创建2个tableView,并用autolayout约束. 2.在ViewController上拖进来. @property (weak, nonatomic) IBOut ...
    
			
    3. 
						
  3. 深度拷贝java对象
			
    有时,如,修改session中对象的时候,如果直接修改session中的对象,修改步骤比较多,一部分修改成功,另一部分不成功,这个时候程序报错,数据库会回滚,但是session已经修改一部分了. 这样 ...
    
			
    4. 
						
  4. jfinal文件上传与下载
			
    import com.alibaba.fastjson.JSONObject; import com.jfinal.core.Controller; import com.jfinal.ext.kit ...
    
			
    5. 
						
  5. BZOJ5105: [CodePlus2017]晨跑
			
    [传送门:BZOJ5105] 简要题意: 给出a,b,c,求a,b,c的最小公倍数 题解: 直接搞(最近刷水题有点心态爆炸) 参考代码: #include<cstdio> #include ...
    
			
    6. 
						
  6. Sqoop-1.4.6工具import和export使用详解（官网）
			
    不多说,直接上干货! 1.Sqoop Import (进入官网) 因为,sqoop的使用方式是: sqoop COMMAND  ARGS. 以下是  sqoop COMMAND  ARGS 以下是   ...
    
			
    7. 
						
  7. 洛谷 P3585 [POI2015]PIE
			
    P3585 [POI2015]PIE 题目描述 一张n*m的方格纸,有些格子需要印成黑色,剩下的格子需要保留白色.你有一个a*b的印章,有些格子是凸起(会沾上墨水)的.你需要判断能否用这个印章印出纸上 ...
    
			
    8. 
						
  8. Objective-C method及相关方法分析
			
    ## Objective-C method及相关方法分析 转载请注名出处 [http://blog.csdn.net/uxyheaven](http://blog.csdn.net/uxyheaven ...
    
			
    9. 
						
  9. 【shell学习】经常使用条件推断-字符，数字，文件
			
    IF 推断 之前也写过简单的shell脚本,也不是转职运维.和系统相关的工作比較少.所以不怎么熟练. 近期因为系统总是出现各种乱七八糟的问题,也没有人来协助.仅仅好自己写shell脚本了,都是些基础的 ...
    
			
    10. 
						
  10. Tomcat会话超时时怎样记录操作日志，满足安全审计要求
			
    众所周知.在实际的Web应用程序中,会话管理一般都採用Web容器会话管理功能. 使用Tomcat做Webserver也是如此,并且从安全的角度考虑,尽量避免去更改和干预Web容器的会话管理功能. To ...
    
			
    11.