门户网站个人可以做吗,wordpress 4 手册 chm,网址导航大全,广告网站推荐做一款软件首先是要做出相应的界面#xff0c;然而对于手机软件开发者来说#xff0c;大小各异的手机屏幕却给我们带来了不少的麻烦。HTML5技术在大家的心中要比传统的Android/iOS/wp简单的多#xff0c;因为它的适配性和平台跨越方面比较出色。在外看来却不是那样的#x…做一款软件首先是要做出相应的界面然而对于手机软件开发者来说大小各异的手机屏幕却给我们带来了不少的麻烦。HTML5技术在大家的心中要比传统的Android/iOS/wp简单的多因为它的适配性和平台跨越方面比较出色。在外看来却不是那样的跨平台的问题暂且不说其屏幕适配方面并不比原生态代码简单。下面给大家分享下我总结出来的H5界面适配
一、Media Queries
网上一搜一大把的一个方式MediaQueries在CSS中写下不同屏幕下使用不同的CSS来实现屏幕适配这个方式不但可以进行字体的适配还能实现不同界面显示不同的样式
1CSS中根据要求写不同的屏幕范围如下:
media screen and (min-width: 240px) and(max-width:319px){ html {font-size: 10px; }
}
2HTML代码头部添加下面一段
meta nameviewportcontentwidthdevice-width, initial-scale1, maximum-scale1.0,user-scalableno; /
这里的各项参数所代表的意思可以另行百度。
这种方式跟android中通过多个drawable、layout、value文件夹各自编写XML界面的方式相同。 二、em和rem的使用
避免px单位的使用是个很重要的一点。这里用em和rem来代替px。
em根据父标签的字体大小来设置当前标签的宽高或字体大小。如
div id”a”
div id”b”/div
/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.fontSizefontSize”px”;
其实不难看出就是拿当前的屏幕尺寸去除一个数值得到字体大小进而将这个字体大小赋值给heml跟节点跟标签即可然后全文设置字体大小或控件大小时使用rem作为单位。也可以配合百分比设置控件大小。这样一来基本上可以根据屏幕尺寸完美缩放自己的界面了。
