一、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. Node.js中的express框架，修改内容后自动更新(免重启)，express热更新

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 以前node中的express框架,每次修改代码之后,都需要重新npm s ...

  2. 替换input单选框的样式

    实现效果:. css的input单选框的样式很丑,有时候不想使用原生的样式,如上照片,可以使用下面的方法. 思路是,给inpu加visibility:hidden隐藏,然后使用不同的图片绝对定位覆盖在 ...

  3. 【阅读笔记】Ranking Relevance in Yahoo Search （四 / 完结篇）—— recency-sensitive ranking

    7. RECENCY-SENSITIVE RANKING 作用: 为recency-sensitive的query提高排序质量: 对于这类query,用户不仅要相关的还需要最新的信息: 方法:rece ...

  4. HDOJ 4699 Editor 对顶栈模拟

    Editor Time Limit: 3000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Subm ...

  5. muduo网络库源码学习————Timestamp.cc

    今天开始学习陈硕先生的muduo网络库,moduo网络库得到很多好评,陈硕先生自己也说核心代码不超过5000行,所以我觉得有必要拿过来好好学习下,学习的时候在源码上面添加一些自己的注释,方便日后理解, ...

  6. TCP的三次握手四次挥手理解及面试题

    一.TCP概述 每一条TCP连接都有两个端点,这种端点我们叫作套接字(socket),它的定义为端口号拼接到IP地址即构成了套接字, 例如,若IP地址为192.0.0.1 而端口号为8000,那么得到 ...

  7. 《新版阿里巴巴Java开发手册》提到的三目运算符的空指针问题到底是个怎么回事？

    最近,阿里巴巴Java开发手册发布了最新版--泰山版,这个名字起的不错,一览众山小. 新版新增了30+规约,其中有一条规约引起了作者的关注,那就是手册中提到在三目运算符使用过程中,需要注意自动拆箱导致 ...

  8. C语言程序设计实验报告三

    C程序设计实验报告 姓 名:张美盛 实验地点:家 实验时间:2020年3月29日 实验项目:4.3.1 If语句的应用 4.3.2 switch-case的应用 4.3.3 switch-case嵌套 ...

  9. 【漫画】JAVA并发编程三大Bug源头(可见性、原子性、有序性)

    原创声明:本文转载自公众号[胖滚猪学编程]​ 某日,胖滚猪写的代码导致了一个生产bug,奋战到凌晨三点依旧没有解决问题.胖滚熊一看,只用了一个volatile就解决了.并告知胖滚猪,这是并发编程导致的 ...

  10. A. Powered Addition(二进制性质-思维)

    \(拿样例来看1 7 6 5\) \(6成长到7是最合理的,因为1s就可以实现而且对于后面来说最优\) \(5成长到7是最合理的,因为2s就可以实现而且对于后面最优\) \(发现了什么?二进制是可以组 ...