一、px em rem

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em会继承父级元素的字体大小。

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

对于需要适配各种移动设备，推荐使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

完美适配方案：

$(function(){
//设置rem
function mobile(){
var size=100, //规定rem与px之间值的转换
maxWidth =750; //设置基准宽度。
ratio = function(){
var r = document.documentElement.clientWidth / maxWidth;
return r>=1?1:r<=0.234?0.234:r;
};
set = function(){
document.documentElement.style.fontSize = ratio() * size +'px';
}();
window.onresize = mobile;
}
mobile();
})

二、Media Queries

直译为媒体查询，在CSS中写下不同屏幕下使用不同的CSS来实现屏幕适配，这个方式不但可以进行字体的适配还能实现不同界面显示不同的样式：

CSS中根据要求写不同的屏幕范围，如下:

@media screen and (min-width: 240px) and(max-width:750px){

html {font-size: 20px; }

}

三、HTML代码头部添加<meta>

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

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

忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- 可选default、black、black-translucent -->

viewport模板
viewport模板——通用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

<title>标题</title>

<link rel="stylesheet" href="index.css">

</head>

<body>

这里开始内容

</body>

</html>

四、百分比的使用

要想屏幕适配的好，就多用百分比来作为宽高的值。这一般是用在css上。

待续......

 

html5做webAPP界面适配总结的更多相关文章

  1. HTML5做的浏览器欢迎界面自动跳转

    HTML5做的浏览器欢迎界面自动跳转 思路很简单,随手装逼呗.根据时间来控制背景图和文字,背景图加了毛玻璃效果,效果直接看图,用javascript来实现. 完整代码 <!DOCTYPE htm ...

  2. android多分辨率多密度下界面适配方案

    前言 Android 设计之初就考虑到了UI在多平台的适配,它本身提供了一套完善的适配机制,随着版本的发展适配也越来越精确,UI适配主要受平台两个因素的影响:屏幕尺寸 (屏幕的像素宽度及像素高度)和屏 ...

  3. iOS:界面适配--iPhone不同机型适配 6/6plus

    iOS:界面适配--iPhone不同机型适配 6/6plus        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系 ...

  4. Unity3d UGUI 界面适配 实例解析 三种适配方式

    之前做游戏都是用公司自己的引擎,对于界面的适配分Android和IOS两种系统处理. 对于IOS设备,由于数量有限,只要做到 960x640  1024x769 1136x640 (当时还没有ipho ...

  5. Unity学习疑问记录之界面适配

    Unity3d UGUI 界面适配 实例解析 三种适配方式 http://www.mamicode.com/info-detail-475563.html

  6. HTML5做手机站页面字体显示很小的解决方法

    HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD ...

  7. 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入

    如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...

  8. 前端观察：HTML5做得好，收入不比 iOS 差

    谷歌奋进的绿色机器人超过了苹果的市场占有率,这一市场现象,导致了愈来愈多的开发者转投html5的怀抱.而HTML5将成为开发者拥抱同时拥抱Android和IOS的不二法门. 根据著名移动生态系统分析公 ...

  9. 用PYTHON首选的GUI库WXPYTHON做程序界面

    大家好,我是A8U神经网络,今天又要跟大家分享一下wxWidgets开发神经网络程序界面的一些经验,希望对开发有兴趣的朋友有所帮助.跨平台的GUI工具库以GTK +,Qt和wxWidgets闻名. G ...

随机推荐

  1. （转）ATOM介绍和使用

    一,Atom介绍 Atom 是 Github 开源的文本编辑器,这个编辑器完全是使用Web技术构建的(基于Node-Webkit).启动速度快,提供很多常用功能的插件和主题,可以说Atom已经足以胜任 ...

  2. 【shell】shell脚本入门

    1. 前言 1.1 为什么学习shell编程 Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具,Linux/UNIX系统的底层及基础应用软件的核心大部分涉及Shell脚 ...

  3. 疯子的算法总结(九) 图论中的矩阵应用 Part 2 矩阵树 基尔霍夫矩阵定理 生成树计数 Matrix-Tree

    定理: 1.设G为无向图,设矩阵D为图G的度矩阵,设C为图G的邻接矩阵. 2.对于矩阵D,D[i][j]当 i!=j 时,是一条边,对于一条边而言无度可言为0,当i==j时表示一点,代表点i的度. 即 ...

  4. Ubuntu开机黑屏解决办法

    联想笔记本通过虚拟机安装Ubuntu12.04后,开机黑屏.这个问题和NVIDIA显卡有关.网上有人提到更改/etc/default/grub文件,可是我通过root身份也无法很好地修改该文件,遂放弃 ...

  5. 自己封装函数，实现数组的内置方法indexOf的功能

    在学习或开发过程中,经常会有朋友需要使用到一个数组方法-indexOf,这里我们先来谈谈它的功能:返回指定数据所在的索引,如果没有则返回-1. 那么我们在使用时通常是直接使用它这个数组内置方法 今天这 ...

  6. C# 数据操作系列 - 1. SQL基础操作

    0.前言 前篇介绍了一些数据库的基本概念和以及一些常见的数据库,让我们对数据库有了一个初步的认识.这一篇我们将继续为C#数据操作的基础填上一个空白-SQL语句. SQL(Structured Quer ...

  7. Nodejs异步编程

    异步函数:异步函数是异步编程语法的终极解决方案,它可以把异步代码写成同步的形式,让代码不再有回调函数嵌套,使代码变得更清晰. const fn = async () =>{}; async  f ...

  8. 【Spark】DataFrame关于数据常用操作

    文章目录 DSL语法 概述 实例操作 SQL语法 概述 实例操作 DSL语法 概述 1.查看全表数据 -- DataFrame.show 2.查看部分字段数据(有4种方法)  (1) DataFram ...

  9. [hdu4670 Cube number on a tree]点分治

    题意:给一个N个带权节点的树,权值以给定的K个素数为因子,求路径上节点乘积为立方数的路径条数 思路:立方数的性质是每个因子的个数为3的倍数,那么每个因子只需要保存0-2三个状态即可,然后路径就可以转化 ...

  10. docker push的时候提示requested access to the resource is denied

    参考:http://blog.csdn.net/baidu_19473529/article/details/70156144 上面的信息显示是拒接访问,因为tag的名字斜线前面部分a10309076 ...