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

做一款软件首先是要做出相应的界面，然而对于手机软件开发者来说，大小各异的手机屏幕却给我们带来了不少的麻烦。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中通过多个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的代码。

纯JS代码可以这样写：

var fontSize = document.body.clientWidth

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

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

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

Html5做webapp中界面适配的问题总结相关推荐

使用layui 做后台管理界面，在Tab中的链接点击后添加一个新TAB的解决方法
使用layui 做后台管理界面,在Tab中的链接点击后添加一个新TAB的解决方法参考文章: (1)使用layui 做后台管理界面,在Tab中的链接点击后添加一个新TAB的解决方法 (2)https: ...
HTML中模仿infini网界面所做的网页界面
HTML中模仿infini网界面所做的网页界面图片都是从原网站保存的效果图: 头部用透明色背景进行了固定定位,鼠标向下滑动时,头部固定,并显示在最上面,提高头部的z-index值让它不会被后面定 ...
iOS 的 APP 在系统中如何适配不同的屏幕的尺寸
iOS 的 APP 在系统中如何适配不同的屏幕的尺寸标签: 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone ...
安卓设备的Socket网络通讯例程 (A2) -UI界面适配
安卓设备的Socket网络通讯例程 (A2)-UI界面适配本博文系JGB联合商务组的原创作品,引用请标明出处 JGB02开发板使用ESP8266芯片组的串口引脚TXD(22脚),RXD(21脚)与一 ...
Kotlin项目实战之手机影音---主界面tab切换、home界面适配、获得首页网络数据
主界面tab切换: 添加点击事件: 接下来需要处理一下主界面TAB的切换了,这里先添加BottomBar的监听事件: class MainActivity : BaseActivity(), Tool ...
Android 拍照以及相册中选择(适配高版本)————上传多张照片之压缩处理、在线预览可伸缩放大(二)
______ Introduction ______ 前言上一篇文章刚给大家总结完,关于上传头像的功能.此文章所述主要是关于上传头像的具体流程以及如何对照片做裁剪处理,回调给控件显示:当然重中之重 ...
APP的UI设计原则及UI界面适配步骤
本文转载自http://www.cyzone.cn/a/20140619/259323.html 从最初的AppStore仅有不到500个APP,到现在,据统计APP近几年增加的数量已经超过3000, ...
android ui布局适配,Android设备的界面适配设计
Android设备App设计中有一个问题可能会被设计师忽略,在各种分辨率各种尺寸"杂屏"的界面适配.可能产出的界面稿在常用的720*1280的分辨率中是完美,但一到各个不同分辨率不 ...
[iOS]关于iOS中界面视图横屏/竖屏切换的问题总结
最近在项目中有个这样的需求:整个APP中界面也竖屏为主,且不能自动横竖屏切换,个别页面可以根据手机的方向横竖屏切换;其实实现起来也并不难,关于视图是否能旋转主要还是有没有设置支持,在工程的Genera ...

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

Html5做webapp中界面适配的问题总结相关推荐

最新文章

热门文章