(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. [Teamcenter 2007 开发实战] 调用web service
			
    前言 在TC的服务端开发中, 能够使用gsoap 来调用web service. 怎样使用 gsoap  , 參考 gsoap 实现 C/C++ 调用web service 接下来介绍怎样在TC中进行 ...
    
			
    2. 
						
  2. android 2048游戏实现
			
    android 的2048小游戏完整实现:GridLayout布局(android 4.0及以上). 曾经做过一个2048的算法题,学了几天android,认为能够实现个安卓版的.也就动手写了个. 包 ...
    
			
    3. 
						
  3. DMA在FPGA的应用之我见
			
    首先,来做一个简单的实验,利用DMA来实现on-chip-memory和SRAM之间的传输,同时也在做一个关于SRAM不同地址之间的传输. 一.硬件设计 1.首先设计自己的SOPC结构,包括CPU.j ...
    
			
    4. 
						
  4. DDR3内存技术原理
			
    随着AMD AM2平台CPU的上市,目前两大处理器巨头均提供了对DDR2内存的支持.不过,DDR2远不是内存技术发展的终点,CPU和内存厂商已经在着手进行DDR3内存的相应准备.DDR2内存的好日子还 ...
    
			
    5. 
						
  5. DECLARE CURSOR (Transact-SQL)
			
    Defines the attributes of a Transact-SQL server cursor, such as its scrolling behavior and the query ...
    
			
    6. 
						
  6. .ds_store是什么文件
			
    .ds_store是什么文件 .DS_Store是Mac OS保存文件夹的自定义属性的隐藏文件,如文件的图标位置或背景色,相当于Windows的desktop.ini. 1,禁止.DS_store生成 ...
    
			
    7. 
						
  7. Yeslab华为安全HCIE七门之-防火墙UTM技术（5篇）
			
    课程目录:     华为安全HCIE-第四门-防火墙UTM技术(5篇)\1_内容安全_内容过滤.avi 华为安全HCIE-第四门-防火墙UTM技术(5篇)\2_内容安全-url过滤.avi 华为安全H ...
    
			
    8. 
						
  8. 【安卓】数据库基于脚本的&quot;增量更新&quot;,每次更新时不需改动java代码、!
			
    思路: 1.当然是基于SQLiteOpenHelper.onCreate(第一次安装程序时调用).onUpdate(升级程序时调用) 2.用"脚本"(脚本制作详细方法问度娘)做数据 ...
    
			
    9. 
						
  9. Reuse Is About People and Education, Not Just Architecture
			
     Reuse Is About People and Education, Not Just Architecture Jeremy Meyer you MigHT AdopT THE AppRoA ...
    
			
    10. 
						
  10. Swift Standard Library Reference.pdf
			
    Swift Standard Library Reference.pdf 下载地址 http://download.csdn.net/detail/swifttrain/7446331 自己的Mark ...
    
			
    11.