移动端H5页面适配问题研究_框架

px：像素

em：一个 M 的宽度（面试：一个字的宽度）

rem：root em 根元素（ <html> ）的 font-size //oppo个别机型不适用

vh：view height，视口高度 100vh === 视口高度

vw：view width，视口宽度 100vw === 视口宽度

浏览器默认 font-size:16px;

Chrome浏览器默认最小字号为12px：font-size:12px;

所以一般情况下，rem 的font-size不要小于12px;

rem 就是 <html> 元素的 font-size，默认为 16px;(浏览器默认font-size)

rem和em 的区别：

1meta viewport

2媒体查询

更具查询结果选择不同的css样式,设置屏幕最大宽度，如果页面范围在这个宽度内就可以显示对应的CSS，以最大500为例

<style>

@media (max-width: 500px) {

}

</style>

3动态 rem方案

一切单位以屏幕宽度为标准，就能完美还原设计稿。

动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem(1rem == html font-size == viewport width)，之后的布局单位全部使用rem来实现整体缩放。

在使用动态 rem 布局的移动端页面中，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。

不是太明白你的意思，不知道我说的跟你说的是否有关系。

我之前做过根据窗口宽度动态的设置的高度，因为某些特殊原因需要让自适应外层容器，但又不能不设置高度（宽度100%），最后利用 js 动态设置的高度（利用本身的宽高比例计算当前的高度），这里用到了 onload 事件和 onresize 事件来响应窗口缩放。

希望可以帮到你。

以上就是关于移动端H5页面适配问题研究全部的内容，包括:移动端H5页面适配问题研究、页面布局方案、移动端，PC端是怎么做适配的等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

移动端H5页面适配问题研究