移動端開發基礎

Viewport視口

在移動端viewport視口就是瀏覽器顯示頁面內容的屏幕區域。在viewport中有兩種視口，分別表示爲， visual viewport（可視視口）和layout viewport（佈局視口）。

visual viewport 固定大小跟屏幕大小相同，在上面，而layout viewport 可改變大小，在下面。Layout viewport默認大小爲980像素，可通過document.documentElement.clientWidth獲取。

現代網頁需要將layout viewport設置成跟visual viewport等同大小，方便進行網頁製作。

Viewport設置

通過<meta>標籤進行設置，name屬性指定viewport值，content屬性進行視口配置。

取值	含義
width	設置layout viewport的寬度特定值，device-width表示設備寬。
height	設置layout viewport 的高度特定值，一般不進行設置。
initial-scale	設置頁面初始縮放。
minimun-scale	設置頁面最小縮放
maximum-scale	設置頁面最大縮放
user-scalable	設置頁面能否進行縮放

移動端適配方案

百分比佈局，也叫流式佈局。代表網站：優酷、百度、天貓、騰訊。
等比縮放佈局，也叫rem佈局。代表網站：網易、愛奇藝、淘寶、美圖。

流式佈局原則

好處：大屏幕下顯示更多的內容。
壞處：寬屏下比例會有一些不協調

案例：仿拉勾網

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


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拉鉤網</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #555555;
        }

        img {
            display: block;
        }

        header {
            height: 45px;
            line-height: 45px;
            color: white;
            font-size: 20px;
            text-align: center;
            background-color: #00b38a;
        }

        .login {
            /* 彈性佈局 */
            display: flex;
            /*子元素兩端對齊 */
            justify-content: space-between;
            /* 子元素垂直居中 */
            align-items: center;
            height: 43px;
            font-size: 14px;
        }

        .login p {
            margin-left: 16px;
        }

        .login div {
            width: 84px;
            height: 30px;
            background-color: #f5f5f5;
            margin-right: 15px;
            border-radius: 15px;
            text-align: center;
            line-height: 30px;
        }

        .login div a {
            height: 100%;
            width: 100%;
        }

        .list li {
            display: flex;
            /* 子元素垂直方向居中 */
            align-items: center;
            height: 90px;
            border-top: 1px solid #e8e8e8;
        }

        .list .list_img {
            width: 60px;
            height: 60px;
            margin: 0 10px 0 14px;
        }

        .list .list_img img {
            width: 100%;
        }

        .list .list_info {
            flex: 1;
        }

        .list .list_info h2 {
            font-size: 18px;
        }

        .list .list_info p:first-of-type {
            display: flex;
            /* 兩端對齊 */
            justify-content: space-between;
            font-size: 14px;
            margin-top: 4px;
        }

        .list .list_info p:first-of-type span:last-of-type {
            margin-right: 14px;
            color: #17b994;
        }

        .list .list_info p:last-of-type {
            font-size: 12px;
            color: #888888;
            margin-top: 8px;
        }

        .more {
            height: 50px;
            background-color: #fafafa;
            line-height: 50px;
            border: 1px solid #e8e8e8;
            text-align: center;
        }

        a.more {
            display: block;
            width: 100%;
            height: 100%;
        }

        footer {
            height: 115px;
            text-align: center;
            font-size: 12px;
            line-height: 22px;
            padding-top: 27px;
            box-sizing: border-box;
            margin-bottom: 45px;
        }

        .tabbar {
            width: 100%;
            height: 45px;
            border-top: 1px #e8e8e8 solid;
            display: flex;
            /* 固定定位 */
            position: fixed;
            bottom: 0;
            background: #f6f6f6;
            font-size: 18px;
            color: #c2cfcc;
        }

        .tabbar i {
            font-size: 22px;
            position: relative;
            top: 2px;
        }

        .tabbar div {
            flex: 1;
            text-align: center;
            line-height: 45px;
        }

        .tabbar .active {
            background: #e7f3f0;
            color: #00b38a;
        }
    </style>

<body>
    <header>拉勾網</header>
    <section>
        <div class="login">
            <p>10秒定製職位</p>
            <div><a href="#">去登錄</a></div>
        </div>
    </section>
    <ul class="list">
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
    </ul>
    <section>
        <a href="#" class="more">加載更多</a>
    </section>
    <footer>
        <p>@2015 lagou.com,all right reserved</p>
        <p>
            <a href="#">移動版</a>
            <a href="#">移動版</a>
            <a href="#">移動版</a>
        </p>
    </footer>
    <section class="tabbar">
        <div class="active"><i class="iconfont icon-home"></i> 職位</div>
        <div><i class="iconfont icon-sousuo-"></i> 搜索</div>
        <div><i class="iconfont icon-wode"></i> 我的</div>
    </section>
</body>

</html>

rem佈局

單位：
- em:是一個相對單位，1em等於當前元素或父元素的font-size值。
- rem:是一個相對單位，1rem等於根元素（html）的font-size值。
- vw/vh：把屏幕分成100份,1vw等於屏幕寬的1%.
動態設置font-size:
- 通過 JS
- 通過vw
  注：要給body重置一下font-size：16px；
  js動態設置font-size:

 layout viewport : document.documentElement.clientWidth

    iphone 6 : 375
    iphone 6 plus : 414

    iphone 6 : document.documentElement.clientWidth / 3.75 -> 100   65
    iphone 6 plus : document.documentElement.clientWidth / 3.75 -> 110.4 

 var fontsize = document.documentElement.clientWidth / 3.75;
 document.documentElement.style.fontSize = fontsize + 'px'

vw動態設置font-size:


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 26.66667vw;
        }
    </style>
</head>

<body>
    vw：把屏幕分成100份，屏幕寬等於100vw
    iphone 375 1vw->3.75
    iphone plus 414 1vw->4.14
    如果在iphone 下等於100px,應該設置多少個vw?
    100/3.75=26.66667個
</body>

</html>

rem按正常佈局就行，可以通過vscode安裝插件px to rem，選中有px單位的元素，然後alt+z就會轉換成rem單位
注意修改插件拓展中的值

eg:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拉鉤網</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        html {
            font-size: 26.666667vw;
        }

        body {
            font-size: 16px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #555555;
        }

        img {
            display: block;
        }

        header {
            height: 0.45rem;
            line-height: 0.45rem;
            color: white;
            font-size: 0.2rem;
            text-align: center;
            background-color: #00b38a;
        }

        .login {
            /* 彈性佈局 */
            display: flex;
            /*子元素兩端對齊 */
            justify-content: space-between;
            /* 子元素垂直居中 */
            align-items: center;
            height: 0.43rem;
            font-size: 0.14rem;
        }

        .login p {
            margin-left: 0.16rem;
        }

        .login div {
            width: 0.84rem;
            height: 0.3rem;
            background-color: #f5f5f5;
            margin-right: 0.15rem;
            border-radius: 0.15rem;
            text-align: center;
            line-height: 0.3rem;
        }

        .login div a {
            height: 100%;
            width: 100%;
        }

        .list li {
            display: flex;
            /* 子元素垂直方向居中 */
            align-items: center;
            height: 0.9rem;
            border-top: 0.01rem solid #e8e8e8;
        }

        .list .list_img {
            width: 0.6rem;
            height: 0.6rem;
            margin: 0 0.1rem 0 0.14rem;
        }

        .list .list_img img {
            width: 100%;
        }

        .list .list_info {
            flex: 1;
        }

        .list .list_info h2 {
            font-size: 0.18rem;
        }

        .list .list_info p:first-of-type {
            display: flex;
            /* 兩端對齊 */
            justify-content: space-between;
            font-size: 0.14rem;
            margin-top: 0.04rem;
        }

        .list .list_info p:first-of-type span:last-of-type {
            margin-right: 0.14rem;
            color: #17b994;
        }

        .list .list_info p:last-of-type {
            font-size: 0.12rem;
            color: #888888;
            margin-top: 0.08rem;
        }

        .more {
            height: 0.5rem;
            background-color: #fafafa;
            line-height: 0.5rem;
            border: 0.01rem solid #e8e8e8;
            text-align: center;
        }

        a.more {
            display: block;
            width: 100%;
            height: 100%;
        }

        footer {
            height: 1.15rem;
            text-align: center;
            font-size: 0.12rem;
            line-height: 0.22rem;
            padding-top: 0.27rem;
            box-sizing: border-box;
            margin-bottom: 0.45rem;
        }

        .tabbar {
            width: 100%;
            height: 0.45rem;
            border-top: 0.01rem #e8e8e8 solid;
            display: flex;
            /* 固定定位 */
            position: fixed;
            bottom: 0;
            background: #f6f6f6;
            font-size: 0.18rem;
            color: #c2cfcc;
        }

        .tabbar i {
            font-size: 0.22rem;
            position: relative;
            top: 0.02rem;
        }

        .tabbar div {
            flex: 1;
            text-align: center;
            line-height: 0.45rem;
        }

        .tabbar .active {
            background: #e7f3f0;
            color: #00b38a;
        }
    </style>

<body>
    <header>拉勾網</header>
    <section>
        <div class="login">
            <p>10秒定製職位</p>
            <div><a href="#">去登錄</a></div>
        </div>
    </section>
    <ul class="list">
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
        <li>
            <div class="list_img">
                <a href="#"><img src="images/lagou1.jpg" alt=""></a>
            </div>
            <div class="list_info">
                <h2><a href="#">正大愛特</a></h2>
                <p>
                    <span>中級java開發工程師</span>
                    <span>13-20k</span>
                </p>
                <p>今天：11:16</p>
            </div>
        </li>
    </ul>
    <section>
        <a href="#" class="more">加載更多</a>
    </section>
    <footer>
        <p>@2015 lagou.com,all right reserved</p>
        <p>
            <a href="#">移動版</a>
            <a href="#">移動版</a>
            <a href="#">移動版</a>
        </p>
    </footer>
    <section class="tabbar">
        <div class="active"><i class="iconfont icon-home"></i> 職位</div>
        <div><i class="iconfont icon-sousuo-"></i> 搜索</div>
        <div><i class="iconfont icon-wode"></i> 我的</div>
    </section>
</body>

</html>

移動端開發基礎

Viewport視口

Viewport設置

移動端適配方案

流式佈局原則

rem佈局

高效率使用windows

移動web開發學習整理

博學谷案例練習

小米首頁案例練習

蘇寧易購首頁局部案例練習

簡書首頁案例練習

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結