手机端

最新推荐文章于 2023-04-12 10:00:05 发布

少女彤

最新推荐文章于 2023-04-12 10:00:05 发布

阅读量135

点赞数

分类专栏：前端文章标签：手机端

本文链接：https://blog.csdn.net/weixin_43244655/article/details/84063046

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.头尾固定，左侧不动，右侧滑动布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头尾部固定</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
            font-size:50px;
        }
        html,body,.app{
            width:100%;
            height:100%;
            display:flex;
            flex-direction: column;
        }
        .middle{
            overflow: auto;
            -webkit-flex: 1;
            color:blue;
            margin-top:30px;
            display:flex;
        }
        .middle>.left{
            width:20%;
            background: yellow;
        }
        .middle>.right{
            width:80%;
            height:100%;
            overflow-y:scroll;
            background: pink;
        }
        footer{
            width:100%;
        }
    </style>
</head>
<body>
    <div class="app">
        <header>头部</header>
        <div class="middle">
            <div class="left">
                12<br>
                12<br>12<br>12<br>12<br>
            </div>
            <div class="right">
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>中间自适应部分<br>
            </div>
        </div>
        <footer>尾部</footer>
    </div>
</body>
</html>

2.rem 布局

<script>
    window.addEventListener('orientationchange', setRem);
    window.addEventListener('resize', setRem);
    setRem();
    function setRem() {
        var html = document.querySelector('html');
        var width = html.getBoundingClientRect().width;
        html.style.fontSize = width / 16 + 'px';
    };
</script>

<style>
    // sass写法
    @function rem($px) {
        @return $px / 46.875 + rem;
    }
    //less写法
    @rem: 46.875rem;
    //stylus自行解决
    ？
</style>

用法：
如：元素宽300px，高500px；
传入参数即可：width:rem(300); height:rem(500);

rem算法解释：
例如：
1，设计图是750；
2，屏幕宽度/16；
计算步骤：
第一步： 750/16 = 46.875，1rem = 46.875
第二步：比如logo图片宽度为240px，那么width应该写成5.12rem

少女彤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机端

1.头尾固定，左侧不动，右侧滑动布局&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;头尾部固定&lt;/title&gt; &lt;style&gt; *{
复制链接

扫一扫