css - 屏幕分辨率移动/Web 可扩展响应

Question

我有一个与移动/网络设备百分比有关的问题。我希望你能对此有所了解。

目前我有：

使用 jquery 导入的 div。

div header (I'd like it to only take up 20% of any scalable screen)
div content (I would like it to only take up 60% of any scalable screen)
div footer (I would like it to only take up 20% of any scalable screen)

我希望我的整个页面无需在移动设备上滚动，如果它也可以（或通过代码指示，当它是移动设备时，所有内容都必须落在视口中而无需滚动）

这样做的问题是引导程序无法正确测量高度。我已阅读此内容： https ://getbootstrap.com/docs/4.0/utilities/sizing/ 这并不能解决我的问题。

通常，在网络上，您使用“没有百分比的标准度量”，但是，在移动设备上则相反，除非所有视图都按照它们的密度设计，那么如果您将使用标准度量。

我发现的最接近的是： https ://css-tricks.com/the-trick-to-viewport-units-on-mobile/ 这解决了问题，但是我正在使用引导程序。引导（自动）标题具有预定义的像素高度。（这意味着如果页眉很长而页脚太长，则必须滚动）

这里我展示一张图片

我正在使用引导程序，但它无法正常工作。（我必须滚动，因为所有组件都有默认高度而不是使用%）

有没有办法让移动设备占据百分比？header div 20% content div 60% footer div 20% 合计为100%。显然如果修改百分比，例如header div 20% to header div 30%，（无论是字母还是高度、间距、图像……它们都会根据屏幕的需要自动增长或减少）

在 android 中它被称为 android 液体/流体设计（无论设备如何，它总是看起来不错）。

在 reactNative 中我没有这些问题，因为组件在视口中。今天可能有一个新系统可以使用引导程序来完成。

标签： csstwitter-bootstrapprogressive-web-apps