Flex结合vh和vm实现响应式布局

最新推荐文章于 2024-04-03 08:04:21 发布

青雾山河

最新推荐文章于 2024-04-03 08:04:21 发布

阅读量1.2k

点赞数 1

分类专栏： HTML 文章标签： Flex vh vw

本文链接：https://blog.csdn.net/weixin_40969422/article/details/89302606

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Icons地址

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./icons/css/bootstrap-icon.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <header class="flex-direction-nav">
            <ul class="nav-row-top">
                <li class="nav-row-item">first</li>
                <li class="nav-row-item">row_1</li>
                <li class="nav-row-item">row_2</li>
                <li class="nav-row-item">row_3</li>
                <li class="nav-row-item">row_4</li>
                <li class="nav-row-item">row_5</li>
                <li class="nav-row-item home">HOME</li>
            </ul>
        </header>

        <div class="sub">
            <aside class="flex-direction-aside aside the-icons">
                <ul class="aside-menu aside">
                    <li class="menu-list" onclick="fullClass(this)">column_1<i class="icon-chevron-up"></i>
                    </li>
                    <ul class="sub-menu">
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                    </ul>
                    <li class="menu-list" onclick="fullClass(this)">column_2<i class="icon-chevron-up"></i>
                    </li>
                    <ul class="sub-menu">
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                    </ul>
                    <li class="menu-list" onclick="fullClass(this)">column_3<i class="icon-chevron-up"></i>
                    </li>
                    <ul class="sub-menu">
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                    </ul>
                    <li class="menu-list" onclick="fullClass(this)">column_4<i class="icon-chevron-up"></i>
                    </li>
                    <ul class="sub-menu">
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                    </ul>
                    <li class="menu-list" onclick="fullClass(this)">column_5<i class="icon-chevron-up"></i>
                    </li>
                    <ul class="sub-menu">
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                    </ul>
                    <li class="menu-list" onclick="fullClass(this)">column_6<i class="icon-chevron-up"></i>
                    </li>
                    <ul class="sub-menu">
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                        <li class="sub-menu-item">menu-item_1</li>
                    </ul>
                </ul>
            </aside>
            <main class="flex-main">
                <h1>THIS IS MY HOME</h1>
            </main>
        </div>
    </div>
    <script src="./js/flex.js"></script>
</body>

</html>

// 获取屏幕分辨率
let min_width = window.screen.availWidth;
let min_height = window.screen.availHeight;
document.querySelector('.container').style['min-width'] = min_width + 'px';
//90% 除去浏览器 上边 下边
document.querySelector('.container').style['min-height'] = min_height * 0.9 + 'px';
// let baseStyle = `
// background-color: #fff;
// overflow: auto;
// position: relative;
// box-sizing: border-box;
// background: #3182af;
// letter-spacing:3px;
// width: 100vw;
// height: 100vh;
// min-width: ${min_width}px;
// min-height: ${min_height}px;
// `;
// document.querySelector('.container').setAttribute('style', baseStyle);

function fullClass(me) {
    // var val = me.firstChild;
    // var val = me.innerText;

    //console.log(me.nextElementSibling);
    let index = 0;
    let val = [];//me.parentNode.children;
    let menu_list = me.parentNode.childNodes;
    menu_list.forEach((element) => {
        if ('menu-list' == element.className) {
            val.push(element);
        }
    });
    // console.log(menu_list);
    // console.log(val);
    for (let i = 0; i < val.length; i++) {
        if (val[i] === me) {
            index = i + 1;
        }
    }
    let color = changeColor(index);
    // val = me.firstElementChild;
    // val = val.className;
    // console.log(me.innerHTML);
    // console.log(new String(val));

    document.querySelector('.flex-main h1').style.background = color;
    document.querySelector('.flex-main h1').innerHTML = me.innerText;

    let dom = me.firstElementChild;//me.children[0];

    let att = dom.getAttribute('class');
    if ('icon-chevron-up' !== att) {
        dom.setAttribute('class', 'icon-chevron-up');
        if ('sub-menu' === me.nextElementSibling.className) {
            me.nextElementSibling.style.display = 'none';
        }
    } else {
        dom.setAttribute('class', 'icon-chevron-down');
        if ('sub-menu' === me.nextElementSibling.className) {
            me.nextElementSibling.style.display = 'inline';
        }
    }
}
function changeColor(event) {
    let index = Number(event);
    let color = 'red';
    switch (index) {
        case 1:
            color = '#FF0000';
            break;
        case 2:
            color = '#00FF00';
            break;
        case 3:
            color = '#0000FF';
            break;
        case 4:
            color = '#FFFF00';
            break;
        case 5:
            color = '#00FFFF';
            break;
        case 6:
            color = '#FF00FF';
            break;

        default:
            color = 'red';
            break;
    }
    return color;
}

*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1rem;
}
.container{
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    overflow: auto;
    position: relative;
    box-sizing: border-box;
    background: #3182af;
    letter-spacing:3px;
}
.flex-direction-nav{
    height: 10%;
}
.nav-row-top{
    display: flex;
    height: 100%;
    flex-direction: row-reverse;
    flex-wrap: nowarp;
}
.nav-row-top .nav-row-item{   
    list-style: none;
    min-width: 10%;
    height: 90%;
    color: #fff;
    border-right: 1px solid #fff;
    margin: auto 3px auto 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.nav-row-top .nav-row-item:hover{
    color: rgb(64, 158, 255);;
    border-radius: 15px;
    height: 70%;
    border: 2px solid #fff;
}
.nav-row-item.home{
    color: rgb(64, 158, 255);;
    width: 100%;
}
.nav-row-top .nav-row-item:first-child{
    border: none;
}

.sub{
    display: flex;
    width: 100%;
    height: 90%;
}
.flex-direction-aside{
    min-width: 15%;
    height: 100%;
    background: rgb(30, 58, 75);
}
.aside-menu{
    margin: 0px 0px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}
.aside-menu .menu-list{
    width: 100%;
    min-height: 10%;
    color: rgb(64, 158, 255);;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.flex-direction-aside .menu-list:hover{
    background: rgb(24, 46, 60);
}

.flex-direction-aside .menu-list:last-child{
    margin: 0;
}
.flex-direction-aside .sub-menu{
    display: none;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sub-menu .sub-menu-item{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 10%;
    color: rgb(64, 158, 255);;
}
.sub-menu .sub-menu-item:hover{
    background: rgb(24, 46, 60);
}
.flex-main{
    min-width: 85%;
    background: #fff;
    background-image: linear-gradient(#52575c, #3a3f44 70%, #3a3f44);
    display: inline-flex;
    overflow: auto;
}
.flex-main h1{
    width: 100%;
    height: 100%;
    background: #b9d0dd;
    color: #fff;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: auto auto;
}

.aside::-webkit-scrollbar{
    width: 0;
    height: 0;
}

青雾山河

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex结合vh和vm实现响应式布局

Icons地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
复制链接

扫一扫