移动web开发入门

转载

mob604756eb17db 2021-10-25 14:44:00

一，视口

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">

获取视口宽度

<script>
        console.log(window.innerWidth);
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.getBoundingClientRect().width);

        var viewWidth = document.documentElement.clientWidth || window.innerWidth;

        // 兼容性问题，不要用
        // console.log(screen.width);

        // dpr
        console.log(window.devicePixelRatio);
    </script>

二，box-sizing

移动端一般选择border-box

.box1 {
            /*width/height代表内容的宽高*/
            box-sizing: content-box;
            padding: 10px;
            border: 10px solid #ccc;
        }
        .box2 {
            /*width/height代表整个盒子的宽高*/
            box-sizing: border-box;
            padding: 10px;
            border: 10px solid #ccc;
        }

三，图标字体

阿里巴巴矢量图标库(https://www.iconfont.cn/)

<link rel="stylesheet" href="css/iconfont.css">

<i class="iconfont icon-scan"></i>
<i class="iconfont icon-backtop"></i>

四，flex布局

五，媒体查询

为什么需要媒体查询？

一套样式不可能适应各种大小的屏幕，针对不同的屏幕大小写样式，让我们的页面在不同大小的屏幕上都能正常显示。

语法

media query

类型

all(default)

screen / print / speech

窗口大于900红
@media screen and (min-width: 900px) {
    body {
        background-color: red;
    }
}

媒体查询中的逻辑

与( and )

或( , )

非( not )

窗口大于900并且小于1024红
@media screen and (min-width: 900px) and (max-width: 1024px) {
    body {
        background-color: red;
    }
}

窗口大于1024或者所有（all）小于900红
@media screen and (min-width: 1024px), (max-width: 900px) {
    body {
        background-color: red;
    }
}

窗口大于1024或者窗口小于900红
@media screen and (min-width: 1024px), screen and (max-width: 900px) {
    body {
        background-color: red;
    }
}

not针对and是针对后面整体
@media not screen and (min-width: 900px) and (max-width: 1024px) {
    body {
        background-color: red;
    }
}

not针对逗号是针对前面，如果后面也要not也要加上
@media not screen and (min-width: 1024px), screen and (max-width: 900px) {
    body {
        background-color: red;
    }
}

媒体特征表达式

width/max-width/min-width

-webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio

orientation

landscape/portrait

不常用

height

device-width/device-height

screen.width/screen.height

aspect-ratio 视口的宽高比

@media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {
    body {
        background-color: red;
    }
}

六，媒体策略

改变屏幕大小，当页面显示不正常的时候，你就需要设置断点了。

xs: < 576px

sm: 576px ~ 768px

md: 768px ~ 992px

lg: 992px ~ 1200px

xl: > 1200px

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>3.8 媒体查询--策略</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        body {
            padding-top: 200px;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .row {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }
        .col {
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: rgba(86, 61, 124, 0.15);
            border: 1px solid rgba(86, 61, 124, 0.2);
        }

        .col {
            width: 100%;
        }
        @media (min-width: 576px) {
            .col {
                width: 50%;
            }
        }
        @media (min-width: 768px) {
            .col {
                width: 25%;
            }
        }
        @media (min-width: 992px) {
            .col {
                width: 16.6666666667%;
            }
        }
        @media (min-width: 1200px) {
            .col {
                width: 8.33333333%;
            }
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
    </div>
</body>
</html>

七，移动端常用单位

px/%/em/rem/vw/vh

width: 100vw;表示宽度百分之百

height: 10vh;表示高度百分之十

px/em

height

假设长度375px，高度50px的元素要等比例，在你使用浏览器拉伸的时候我们假定获取到拉伸长度为750px。高度为Y。

那么 375/750 = 50/Y，Y=100

height = (document.documentElement.clientWidth / 375) * 50 px

用px/em做单位，每次都要用js一一修改

能不能统一修改呢？

rem 针对的是HTML下的font-size大小设定

所以可以通过更改HTML下的font-size大小来对页面元素进行等比例放大缩小

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>3.9 移动端常用单位</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <style>
        /*px/%/em/rem/vw/vh*/

        /*css reset*/
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #e2e2e2;
            color: #595B66;
        }
        a {
            font-size: 12px;
            color: #686868;
            text-decoration: none;
        }
        li {
            list-style: none;
        }

        .tabbar-container {
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 1000;
            width: 100%;


            background-color: #fff;
            box-shadow: 0 0 10px 0 rgba(154, 141 ,141, 0.6);

            height: 2.5rem;
        }
        .tabbar-link .iconfont {
            font-size: 1.2rem;
        }
        .tabbar,
        .tabbar-item,
        .tabbar-link {
            height: 100%;
        }
        .tabbar {
            display: flex;
        }
        .tabbar-item {
            flex: 1;
        }
        .tabbar-link {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            font-size: 0.6rem;
        }
        .tabbar-item-active .tabbar-link {
            color: #de181b;
        }
    </style>
</head>
<body>

    <!-- <p style="text-indent: 2em;">
        我是短路
    </p> -->

    <div class="tabbar-container">
        <ul class="tabbar">
            <li class="tabbar-item tabbar-item-active">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-category"></i>
                    <span>分类页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-cart"></i>
                    <span>购物车</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-personal"></i>
                    <span>个人中心</span>
                </a>
            </li>
        </ul>
    </div>

    <script>
        setRemUnit();

        window.onresize = setRemUnit;

        function setRemUnit() {
            var docEl = document.documentElement;
            var viewWidth = docEl.clientWidth;

            docEl.style.fontSize = viewWidth / 375 * 20 + 'px';
            // docEl.style.fontSize = viewWidth / 750 * 40 + 'px';
            // 1rem = 20px
        }
    </script>
</body>
</html>