移动端布局方案

3 篇文章 0 订阅

移动端布局方案

  • 百分比布局
    百分比布局的,这样的做法的话是比较费时间的,有些细节的地方还需要用媒体查询来做兼容。做起来挺费时间,而且对于设计稿的还原也不好。所以这里>也不怎么推荐

  • 固定的设备宽度
    在做移动开发的时候很多人都会加上viewport的配置,
    那么固定设备宽度的布局就是根据这个来设置的,将viewport里面的宽度width设置成设计稿的宽度,也就是说原本是width=device-width,即宽度为设备的宽度

    假如在iphone6上显示的时候,那么页面的宽度就是375px; 当我们将width设置成设计稿的宽度的,假如设计稿是750px,而我们的css也按设计的尺寸来做,例如一个图片是200px*200px,那么在css上也是宽高都是写200px,也就是1:1的比例。那么在375px的手机上显示的时候,就会缩小2倍显示,以此类推,在320px的宽度的时候,就会缩小2.3倍显示,在414px的宽度的时候就会缩小1.8倍。
    这样的写法是会比较好的还原设计稿,而且速度也会比较快,但是这样也有缺点,在缩小的时候有些设备会比较模糊,因为你强行将设备放大了

    这里要注意几个重要的参数:vh\vw\vmax\vmin

    vh:网页视口高度的百分之一

    vw:网页视口宽度的百分之一

    vmax:取两者的最大值

    vmin:取两者的最小值

    <style>
            body {
                margin: 0;
                padding: 0;
            }
    
            #container {
                background-color: red;
                width: 10vw;
                height: 10vh;
            }
        </style>
    <body>
        <p>vw vh 测试</p>
        <div id="container">
        </div>
    
        <script>
            // window.innerHeight === 100vh
            // window.innerWidth === 100vw
        </script>
    
  • rem布局
    这个应该是比较多人使用的,也是比较流行的。使用rem布局优点是可以适应多个屏幕 ,也比较好的还原设计稿。在有些地方需要一屏显示完设计稿的时候,可能需要用到vh,或是百分比。
    rem布局简单来说就是根据页面的font-size的大小来设置页面元素的属性

    <style type="text/css">
            @media only screen and (max-width: 374px) {
                /* iphone5 或者更小的尺寸,以 iphone5 的宽度(320px)比例设置 font-size */
                html {
                    font-size: 86px;
                }
            }
            @media only screen and (min-width: 375px) and (max-width: 413px) {
                /* iphone6/7/8 和 iphone x */
                html {
                    font-size: 100px;
                }
            }
            @media only screen and (min-width: 414px) {
                /* iphone6p 或者更大的尺寸,以 iphone6p 的宽度(414px)比例设置 font-size */
                html {
                    font-size: 110px;
                }
            }
    
            body {
                font-size: 0.16rem;
            }
            #div1 {
                width: 1rem;
                background-color: #ccc;
            }
    
        </style>
    <body>
        <div id="div1">
            this is div
        </div>
    </body>
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值