WebAPP开发之html5界面适配总结-职坐标

WebAPP开发之html5界面适配总结

白羽 2018-06-14 来源：网络阅读 523 评论 0

摘要：本文将带你了解WebAPP开发之html5界面适配总结，希望本文对大家学WEBAPP有所帮助。

一、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页面窗口自动调整到设备宽度，并禁止用户缩放页面

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

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

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

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

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上。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

移动端web开发 webapp教程手机app制作

本文由 @白羽发布于职坐标。未经许可，禁止转载。