Html5做webapp中界面适配的问题总结

不念不忘少年蓝@ 2021-09-14 04:34 222阅读 0赞

做一款软件首先是要做出相应的界面，然而对于手机软件开发者来说，大小各异的手机屏幕却给我们带来了不少的麻烦。[HTML5][]技术在大家的心中要比传统的[Android][]/[iOS][]/wp简单的多，因为它的适配性和平台跨越方面比较出色。在外看来却不是那样的，跨平台的问题暂且不说，其屏幕适配方面并不比原生态代码简单。下面给大家分享下我总结出来的H5界面适配：

一、Media Queries

网上一搜一大把的一个方式MediaQueries，在CSS中写下不同屏幕下使用不同的CSS来实现屏幕适配，这个方式不但可以进行字体的适配还能实现不同界面显示不同的样式：

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

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

html \{font-size: 10px; \}

2：HTML代码头部添加下面一段：

这里的各项参数所代表的意思可以另行百度。

这种方式跟[android][Android]中通过多个drawable、layout、value文件夹各自编写XML界面的方式相同。

二、em和rem的使用

避免px单位的使用是个很重要的一点。这里用em和rem来代替px。

em：根据父标签的字体大小来设置当前标签的宽高或字体大小。如：

</div>

如果给b设置字体大小为0.5em，则b的字体大小将会是a的一半。但是本人并不推荐大量使用em，因为这会让你的计算变得困难。试想，当多层嵌套时都使用em那最里面的字体将是最外层标签字体的几分之几呢？

rem：根据跟标签的字体大小来适配当前标签的宽高或字体大小。

这个单位推荐使用，所谓的跟标签，对于html代码来说，自然就是最外层的<html>标签了。不管自己的html代码有多少层的嵌套rem单位总是根据<html>标签字体来计算。

三、百分比的使用

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

四、绝对适配方案

不久前打开QQ邮箱，发现一个现象，当屏幕很小的时候QQ邮箱的字体就很小，当浏览器不断的拖大的过程中字体就好跟着慢慢变大。这让我甚是惊奇，我也一直想实现这样的一个屏幕适配方案。后来有了下面的方案，其实就是为了把这个方案分享出去才会有了这篇文章，说起来也简单，在采用rem作为大小单位的同时通过[js][]根据屏幕大小计算出一个合适的数值赋值给当前的html即可。

在onLoad的时候执行下面的代码（后面的20根据自己的需要来改）

var fontSize = $(window).width()/20;//屏幕的宽

$("html").css("font-size",fontSize +"px");

这里是引用了[jQuery][]，因而上面两行代码也是[jquery][jQuery]的代码。

纯JS代码可以这样写：

var fontSize = document.body.clientWidth

var htmlElement = document.getElementsByTagName("html")\[0\];

htmlElement.style.fontSize=fontSize+”px”;

其实不难看出，就是拿当前的屏幕尺寸去除一个数值，得到字体大小，进而将这个字体大小赋值给heml跟节点（跟标签）即可，然后全文设置字体大小或控件大小时使用rem作为单位。也可以配合百分比设置控件大小。这样一来基本上可以根据屏幕尺寸完美缩放自己的界面了。

[HTML5]: http://lib.csdn.net/base/html5
[Android]: http://lib.csdn.net/base/android
[iOS]: http://lib.csdn.net/base/ios
[js]: http://lib.csdn.net/base/javascript
[jQuery]: http://lib.csdn.net/base/jquery