移动端布局方案

最新推荐文章于 2021-10-13 11:34:58 发布

漫川清梦压星河

最新推荐文章于 2021-10-13 11:34:58 发布

阅读量81

点赞数

分类专栏： css html 文章标签： css3 面试

本文链接：https://blog.csdn.net/mangguom23/article/details/112800961

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

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
评论
移动端布局方案

移动端布局方案百分比布局百分比布局的，这样的做法的话是比较费时间的，有些细节的地方还需要用媒体查询来做兼容。做起来挺费时间，而且对于设计稿的还原也不好。所以这里>也不怎么推荐固定的设备宽度在做移动开发的时候很多人都会加上viewport的配置，那么固定设备宽度的布局就是根据这个来设置的，将viewport里面的宽度width设置成设计稿的宽度，也就是说原本是width=device-width，即宽度为设备的宽度假如在iphone6上显示的时候，那么页面的宽度就是375px; 当我
复制链接

扫一扫

专栏目录