js 关于网易淘宝移动端适配的学习
(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 关于网易淘宝移动端适配的学习的更多相关文章
- 资深P7架构师详解淘宝服务端高并发分布式架构演进之路
1. 概述 本文以淘宝作为例子,介绍从一百个并发到千万级并发情况下服务端的架构的演进过程,同时列举出每个演进阶段会遇到的相关技术,让大家对架构的演进有一个整体的认知,文章最后汇总了一些架构设计的原则. ...
- vue2.0 类淘宝不同屏幕适配及px与rem转换问题
因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没 ...
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 淘宝网触屏版 - 学习笔记(0 - 关于dpr)
注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name=&qu ...
- 淘宝网触屏版 - 学习笔记(1 - 关于meta)
注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. <meta charset="utf-8"> <meta cont ...
- 手淘的移动端适配方案flexible
基于 vue-cli 配置手淘的 lib-flexible + rem,实现移动端自适应 安装 flexible npm install lib-flexible --save 引入 flexible ...
- js 实现仿 淘宝 五星评价 demo
<style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.co ...
- js运动 模仿淘宝幻灯
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 淘宝ios端弹窗-2020年3月25日
随机推荐
- Codeforces 327A-Flipping Game(暴力枚举)
A. Flipping Game time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- redis之字符串命令源代码解析(二)
形象化设计模式实战 HELLO!架构 redis命令源代码解析 在redis之字符串命令源代码解析(一)中讲了get的简单实现,并没有对 ...
- uip UDP server广播模式(client能够随意port,而且主动向client发送数据)
眼下移植uip,发现UDP server模式下,必须指定本地port以及clientport,否则仅仅能讲clientport设置为0,才干接收随意port的数据,可是无法发送数据,由于此时clien ...
- GPU方法做倒排压缩和交集计算
之前一直想读这篇,今天读了一下,颇有收获: 1.对文档按相似term聚类之后,delta较小,能够提高压缩率(similarity graph) 1.GPU一般能够有几百个核,有shared memo ...
- bzoj 1010 (单调决策优化)
能够非常好的证明单调决策性质.用 记sum[i]=sigma(C[1],C[2].....C[k]);f[i]=sum[i]+i; c=l-1; 有转移dp[i]=min( dp[j]+(f[i ...
- Lesson 2 Building your first web page: Part 1
In this ‘hands-on’ module we will be building our first web page in no time. We just need to quickly ...
- zzulioj--1815--easy problem(暴力加技巧)
1815: easy problem Time Limit: 1 Sec Memory Limit: 128 MB Submit: 98 Solved: 48 SubmitStatusWeb Bo ...
- @Transactional 事务注解
@Transactional(propagation = Propagation.REQUIRED, isolation = Isolation.SERIALIZABLE, rollbackFor = ...
- Xamarin大佬的地址
https://www.cnblogs.com/hlx-blogs/p/7266098.html http://www.cnblogs.com/GuZhenYin/p/6971069.html
- 2D上下文
js中说明的上下文表示的意思为C++中作用域(个人理解),因此2D上下文说明的是这个2D的作用域 像素:用来描述图片清晰度的小矩阵 填充和描边 填充:context.fillStyle = " ...