APP自适应的例子
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8">
<title>rem phone test</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html {
height: 100%;
width: 100%;
font-family: 'Heiti SC', 'Microsoft YaHei';
font-size: 20px;
overflow: hidden;
outline: 0;
-webkit-text-size-adjust:none;
}
body {
height: 100%;
margin: 0 auto;
overflow: auto;
-webkit-user-select: none;
position: relative;
}
header,footer {
width: 100%;
line-height: 1.5rem;
font-size: 1rem;
color: #000;
border: 1px solid #ccc;
text-align: center;
font-weight:bold;">#ccc;
}
.bd {
margin-top: 1rem;
margin-bottom: .5rem;
margin-right: -.5rem;
font-size: 0;
}
.box {
width: 5rem;
height: 5rem;
display: inline-block;
margin-right:0.5rem;
margin-bottom:0.5rem;
}
.blue-box {
font-weight:bold;
background-color:red;
}
.org-box {
font-weight:bold;
background-color:blue;
}
</style>
</head>
<body>
<header>我是头部</header>
<div class="bd">
<div class="box blue-box"></div>
<div class="box red-box"></div>
<div class="box blue-box"></div>
<div class="box red-box"></div>
<div class="box blue-box"></div>
<div class="box red-box"></div>
</div>
<footer>我是页脚</footer>
<script>
(function (doc, win) {
//获取根节点,将它赋值给一个变量
var docEl = doc.documentElement,
//利用三目运算来判断window中是否有这个事件,将它赋值给变量
//orientationchange()是改变窗口的方向
//resize()是计算窗口改变了多少次
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//获取可视区域的宽度
var clientWidth = docEl.clientWidth;
//进行判断是否要执行下面的换算
if (!clientWidth){
//0 undefined "" 都会返回false
return;
}
//进行单位的换算,通过窗口的变化,来进行根节点的单位变化
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener){
return;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); //匿名函数的传参
</script>
</body> </html>
APP自适应的例子的更多相关文章
- web app 自适应方案总结 关键字 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
- web app 自适应方案总结 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
- web app 自适应 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
- 移动端Web App自适应布局探索
1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...
- Android学习系列(4)--App自适应draw9patch不失真背景
做人要大度,海纳百川,做事要圆滑,左右逢源,这让我想到了编程也是如此,代码要扩展,界面也要考虑自适应.这篇文章是Android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1. ...
- 手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应
转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mo ...
- vue 单页面应用 app自适应方案
本文是使用淘宝的方案进行布局开发的,遇到的问题是会对app内使用的第三方插件,当页面进行缩放后,比如高德地图中的文字会显得过小,我使用的方法就是手动的动每一个尺寸进行手动的px 到 rem的替换,而不 ...
- flex自适应小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端web app自适应布局探索与总结
要掌握的知识点: iphone6 屏幕尺寸为 375*667 (pt)也就是 网页 全屏显示时候 document.documentElement.clientWidth------可以理解为屏幕越大 ...
随机推荐
- 用qpython3写一个最简单的发送短信的程序
到目前为止并没有多少手机应用是用python开发的,不过qpython可以作为一个不错的玩具推荐给大家来玩. 写一个最简单的发送短信的程序,代码如下: #-*-coding:utf8;-*- #qpy ...
- 大公司的Java面试题集
找工作要面试,有面试就有对付面试的办法.以下一些题目来自我和我朋友痛苦的面试经历,提这些问题的公司包括IBM, E*Trade, Siebel, Motorola, SUN, 以及其它大小公司. 面试 ...
- 11-10 CC150第一章
题目: 1.1 Implement an algorithm to determine if a string has all unique characters. What if you can n ...
- android基础(三)ContentProvider
ContentProvider主要用于在不同的应用程序之间实现数据共享,它提供了一套完整的机制,允许一个程序访问另一个程序中的数据,同时还能保证被访问数据的安全性,目前内容提供其实android实现跨 ...
- CSS3特性 盒模型 动画
转发自0101后花园 CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 一.Transitions 语法:transi ...
- 2015百度之星1002 查找有序序列(RMQ+主席树模板水过)
题意:求在数列中能找到几个个长度为k 的区间,里面的 k 个数字排完序后是连续的. 思路:枚举范围,判断区间内是否有重复的数字(主席树),没有的话求区间最大-区间最小(RMQ),判断是否等于K,是的话 ...
- import和from import陷阱二
1 2 3 4 5 6 7 8 9 10 11 12 13 14 #from os import path import os.path path='/home/vamei/doc/file.txt' ...
- IOS网络开发(三)
1 飞机航班查询软件 1.1 问题 NSURLConnection是IOS提供的用于处理Http协议的网络请求的类,可以实现同步请求也可以实现异步请求,本案例使用NSURLConnection类实现一 ...
- Sublime Text 3安装插件指南
Sublime Text已经很用得很广泛,一般普通的功能已经够用,加入一些插件能些许加快开发. 安装 Package Control 有了插件控制器Package Control安装起来就很轻松了. ...
- A candidate solution for Java Web Application - current session
Motivation Do it once, resue for ever. Audience myself, Java Web developers Scope 应用案例 图书借阅系统 阶段1需求: ...