移动web开发入门

一，视口

    <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布局

https://www.cnblogs.com/liqianlong/p/15458985.html

五，媒体查询

为什么需要媒体查询？
一套样式不可能适应各种大小的屏幕，针对不同的屏幕大小写样式，让我们的页面在不同大小的屏幕上都能正常显示。

语法
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>