移动端布局问题

Question

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
移动端布局改怎么布局呢？用百分比不是很稳定，有经验的大虾能指教一二吗~~

Answer 1

用 rem 省心省力

<script>
    function setRemFontSize() {
        var remSize = window.innerWidth / 7.5;
        document.querySelector("html").style.fontSize = (remSize > 100 ? 100 : remSize) + "px";
    }
    setRemFontSize();
    window.addEventListener("resize", function () {
        setTimeout(function () {
            setRemFontSize();
        }, 200)
    });
</script>

以上是我写的用rem布局 然后根据js监控页面的窗口大小 然后响应改变 font-size的大小 表示 当页面窗口大小为750px时 font-size=100px使用的时候在页面引入 然后 单位自动设置 比如你要设置100px 换成rem就是“1rem”

或者 推荐你去看看手淘的flexible布局 其实跟我这个差不多
http://www.tuicool.com/articl...

Answer 2

我平时用的比较多的是flex布局，也是react native推荐的webapp布局方式

Answer 3

比较推荐rem布局，也可以用部分固定，部分自由适应的布局。