html开发移动APP窗口大小自适应,移动端web开发，怎么自适应屏幕的大小

原标题：移动端web开发，怎么自适应屏幕的大小

作者介绍：咔拉宝宝前端工程师，致力于首个情景式购物商城咔拉商城的前端搭建，在咔拉职场栏目作为程序猿担当，与读者朋友们共同探讨前端开发的那些事。

在移动端web开发，手机页面的自适应大小，该如何解决了？

1.Viewport

在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport(视口),这个区域可是设置高度宽度，可是按比例放大缩小，而且能设置是否允许用户自行缩放。

在标签内增加一个的标签。

这样就构建了一个移动的web页面。

2.rem em vh vw %

布局用rem em vh vw 单位可以用来进行适配，

rem 以根元素的字体大小来进行适配。

em 以父元素的字体大小来进行适配。

vh 当前屏幕可见高度的%。

vw当前屏幕可见宽度的%。

这些在一些低版本的IE就不支持了。

3.屏幕的自适应方案

自适应的方案有很多，比如百分比布局，弹性布局等。

我在咔拉商城移动端，用的是响应式布局，看上面图片，在各个手机屏幕大小都能很好的适应。

在CSS文件里输入

用媒体查询来自适应屏幕的大小，之后可以用rem单位来进行适配。

还一些其他自适应的方案，像lib-flexible，lib-flexible引入文件后，会根据屏幕的大小，动态更改根元素html的font-size的大小。也是用rem自适应的。这个方案也很好用。返回搜狐，查看更多

责任编辑：