一、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. 《图解 HTTP》 摘要一

    学习过程对书本的内容的摘要以及总结,逐步完善,带有个人理解成分. Web 及网络基础 使用 HTTP 协议访问 Web 客户端:通过获取请求获取服务资源的 Web 浏览器等 HTTP 全称:Htype ...

  2. shell基础知识DAY2

    1.管道符(|):把一个命令的输出,把输出的内容传递给管道符后面命令的输入.如:ls -l | grep "^[^d]".2.jobs作业控制,后台运行bg PID,前台运行fg ...

  3. mysql 5.7 MGR

    最近看了一下mysql5.7的MGR集群挺不错的,有单主和多主模式,于是乎搭建测试了一下效果还不错,我指的不错是搭建和维护方面都比较简单.网上绝大多数都是单主模式,当然我这里也是,为了加深印象,特意记 ...

  4. IDC：企业需求疲软 第三季度全球服务器市场收入下滑7%

    根据IDC全球服务器季度追踪报告,2016年第三季度全球服务器市场同比减少7%至125亿美元.整个服务器市场的增长最近有所放缓,部分原因是超大规模数据中心增长放缓,以及受到高端服务器销售下滑的拖累.此 ...

  5. MYSQL 排序和分组

    一.MYSQL 中有两种排序方式: 1:通过有序索引顺序扫描直接返回有序数据,这种方式在使用explain 分析查询的时候显示为Using Index ,不需要额外的排序,操作效率较高. 2: 是通过 ...

  6. 难道你现在还不知道：C/S和B/S

    随着网络技术的不断发展,各种各样的网络应用程序大爆发.运用最多的架构是基于浏览器+服务器的B/S结构,另一种是基于的 C/S结构. 概述: BS = Browser / Server =浏览器+服务器 ...

  7. codeforce 1311 C. Perform the Combo 前缀和

    You want to perform the combo on your opponent in one popular fighting game. The combo is the string ...

  8. C++类学习（2）

    Ⅰ:类概念 一:类的构成 class 类名 { public: 公有数据成员和成员函数:类的接口 protected: 保护数据成员和成员函数: private: 私有数据成员和成员函数: }://注 ...

  9. SpringBoot上传文件大小限制

    SpringBoot默认上传文件大小不能超过1MB,超过之后会报以下异常: org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSize ...

  10. 王颖奇 201771010129 《面向对象程序设计（java）》第二周学习总结

    <面向对象程序设计(java)>第二周学习总结 王颖奇 201771010129 第一部分:实验目的与要求 ①理论部分目的与要求 (1)基本知识(2)数据类型(3)变量(4)运算符(5)类 ...