一、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. Redis介绍及字符串操作

    一.前言 不同程序之间实现通信的方法? A.通过不同程序之间建立socket,实现通信.实际应用适用于使用broker,如RabbitMQ,ZeroMQ. B.通过Json,Pickle,利用文件的写 ...

  2. shell基础知识DAY2

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

  3. Codeforce 1255 Round #601 (Div. 2)D. Feeding Chicken （模拟）

    Long is a huge fan of CFC (Codeforces Fried Chicken). But the price of CFC is increasing, so he deci ...

  4. 积性函数初步（欧拉$\varphi$函数）

    updata on 2020.4.3 添加了欧拉\(\varphi\)函数为积性函数的证明和它的计算方式 1.积性函数 设\(f(n)\)为定义在正整数上的函数,若\(f(1)=1\),且对于任意正整 ...

  5. ln命令：软链接与硬链接的区别与应用

    ln命令:软链接与硬链接的区别与应用 摘要 Linux系统中,链接是一个十分常见且实用的文件处理命令,它分为软链接和硬链接两种类型.软链接类似于Windows中的快捷方式,硬链接又有着与原文件保持同步 ...

  6. 龙贝格算法 MATLAB实现

    龙贝格算法主要是不断递推和加速,直到满足精度要求 递推: 加速: 得到T表: MATLAB代码: function I = Romberg(f, a, b, epsilon) I = 0; h = b ...

  7. 【Scala】代码实现Actor多种需求

    文章目录 简单实现Actor并发编程 使用Actor实现发送没有返回值的异步消息 使用Actor实现不间断消息发送 用react方法替代receive方法接收消息 结合case class,通过匹配不 ...

  8. 美团分布式ID生成框架Leaf源码分析及优化改进

    本文主要是对美团的分布式ID框架Leaf的原理进行介绍,针对Leaf原项目中的一些issue,对Leaf项目进行功能增强,问题修复及优化改进,改进后的项目地址在这里: Leaf项目改进计划 https ...

  9. Druid 0.17入门（4）—— 数据查询方式大全

    本文介绍Druid查询数据的方式,首先我们保证数据已经成功载入. Druid查询基于HTTP,Druid提供了查询视图,并对结果进行了格式化. Druid提供了三种查询方式,SQL,原生JSON,CU ...

  10. 简述SpringCloud框架

    1.什么是SpringCloud? SpringCloud是一系列框架的有序集合,它利用SpringBoot的开发便利性简化了分布式系统的开发,比如服务发现.服务网关.服务路由.链路追踪等.Sprin ...