如何解决webapp手机适配问题

Question

如何解决webapp手机适配问题

Answer 1

其屏幕适配方面并不比原生态代码简单。下面给大家分享下我总结出来的H5界面适配：
一、Media Queries
网上一搜一大把的一个方式MediaQueries，在CSS中写下不同屏幕下使用不同的CSS来实现屏幕适配，这个方式不但可以进行字体的适配还能实现不同界面显示不同的样式：
1：CSS中根据要求写不同的屏幕范围，如下:
@media screen and (min-width: 240px) and(max-width:319px){
html {font-size: 10px; }
}
2：HTML代码头部添加下面一段：
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1.0,user-scalable=no;" />
这里的各项参数所代表的意思可以另行百度。
这种方式跟android中通过多个drawable、layout、value文件夹各自编写XML界面的方式相同。

二、em和rem的使用
避免px单位的使用是个很重要的一点。这里用em和rem来代替px。
em：根据父标签的字体大小来设置当前标签的宽高或字体大小。如：
<div id=”a”>
<div id=”b”></div>