用html5开发的应用,屏幕适配的问题如何解决?

html-css09

用html5开发的应用,屏幕适配的问题如何解决?,第1张

目前大部分网站已经逐渐尝试使用HTML5进行重构,但基本大多停留使用新的HTML5语义化标签上。对于低版本IE浏览器,兼容新的HTML5标签很容易。而HTML5的新属性用到的不多,通常都是新属性+js兼容法。对于特殊的功能性新标签,国内几乎没有大型网站使用,如video、audio、canvas等。在国内,要是等现代浏览器普及了再开始用HTML5那至少要5年以上,IE6应该还有1年左右就差不多灭绝了,IE8短时间内不会灭绝。建议可以考虑HTML5+兼容性辅助,让现代浏览器显示炫酷效果,老浏览器保证业务正常即可,不一定和HTML5版本样式完全一样,只要最基本功能有就行了。移动端大多是webkit内核,可放心使用HTML5。

第1部分:

基本的屏幕适配知识:

1、屏幕大小

在Android系统中,把屏幕大小分为以下4种:small、normal(标准)、large、

extra large(引申为更大的屏幕)。

2、屏幕密度

在Android系统中,屏幕密度指的是在指定的屏幕大小区域内,有多少个像素。基本单位为dpi(点/每英寸)。

基本包括4种密度:low、dedium(中等)、high、extra high(引申为更高的密度)。

常见的屏幕密度如下:QVGA(240x320)、HVGA(320x480)、WVGA800(480x800)

第2部分:

Android官方的解决方案:

从Android1.6版系统起,res文件夹下面的drawable文件夹由原来的1个变为了3个。

如下图所示:

这三个文件夹分别用来存放高密度、中等密度和低密度的图片。

具体的适配方法,用一个案例来说明。

例如:

创建一个工程:test_demo_01

在3个drawable文件夹下面分别放置高密度、中等密度和低密度的图片。

然后在AndroidMainfest.xml中添加如下内容:

此外需要注意的是:

1、图片布局的基本单位应该是dip。

2、不要使用绝对布局(AbsoluteLayout)。

以下是3种屏幕的自适应结果

1.rem

rem是相对于 根元素 的字体大小的单位

rem能等比例适配所有的屏幕,根据html的字体的大小来控制rem的大小

2.dpr设备像素比

dpr = 物理像素 / 逻辑像素

物理像素:设计图量出的px(设备显示的px)

逻辑像素:css中设置的px

如果设计图的宽度是640px 或者 750px    dpr = 2

如果设计图的宽度是1080px              dpr = 3

3.vw

视窗宽度

1vw 等于视窗宽度的1%

100vw 等于视窗宽度的100%

4.vw 与 px 之间的换算

如果设计图的宽度是640px  则 dpr = 2

所以:逻辑像素 = 640px /2 = 320px

所以:320px = 100vw

所以:1vw = 3.2px

所以:31.25vw = 100px = 1rem

如果设计图的宽度是750px  则 dpr =2所以:逻辑像素 = 750px /2= 375px

所以:375px = 100vw

所以:1vw =3.75px

所以:26.67vw = 100px = 1rem

如果设计图的宽度是1080px  则 dpr = 3所以:逻辑像素 = 1080px / 3 = 360px

所以:360px = 100vw

所以:1vw =3.6px

所以:27.78vw = 100px

5.根元素字体大小的限制

如果设计图宽度为640px

则:根元素设置为

html{font-size:31.25vw}

如果设计图宽度为750px

则:根元素字体大小设置为

htmt:{font-size:26.67vw}

如果设计图宽度为1080px

则根元素字体大小设置为

html:{font-size:27.78vw}

6.计算方法:

为了方便计算:1rem = 100px,,所以,要除以100

已知 dpr = 2

如果量取设计图的某部分 宽度  300px

物理像素-------逻辑像素-------rem

则:300/2/100 = 1.5rem

7. rem是相对于根元素的字体大小的单位,能等比例适配所有的屏幕,根据html的字体的大小来控制rem的大小

如果设计图为 640px

根元素font-size=31.25vw 相当于100px,相当于 1rem

如果设计图为750px

根元素font-size=26.67vw 相当于100px,相当于 1rem

一般,我们要在公共样式中根据设计图的大小,设置根元素字体的大小,单位为vm,

如果设计图为640px,html{font-size:31.25vw}

如果设计图为750px,html{font-size:26.67vw}

然后,我们量取得px/2/100即:物理像素/2/100