★移动端开发总结 – 开源达人博客

响应式，对不同的屏幕做出回应。
1,缩小到可视范围   375    980内缩小到可显范围内。
视口
 <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- <meta name="viewport" content="width=375"> -->
    都是375	
    <!-- <meta name="viewport" content="width=device-width"> -->
    根据视口调整为尺寸
    <!-- <meta name="viewport" content="height"> -->
    基本不用。
    <!-- <meta name="viewport" content="initial-scale=1"> -->
    初始的缩放比例
    <!-- <meta name="viewport" content="initial-scale=2"> -->
    初始的缩放比例
    <!-- <meta name="viewport" content="initial-scale=0.5"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"> -->
    <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:content-box;  内容包括
box-sizing:border-box;   边框包括

如果两个图平行。我们使用 box-sizing:content-box;  内容包括  就不太好改。
所以使用 box-sizing:border-box;   想加边框，内外边距都很方便。

==============================================

flex 看帮助手册。

==============================================

/*1. 什么是媒体查询 media query*/
        /*@media screen and (min-width: 900px) {
            body {
                background-color: red;
            }
        }*/

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

        /*
            3. 媒体类型
                all(default)
                screen / print / speech
        */
        /*@media (min-width: 900px) {
            body {
                background-color: red;
            }
        }*/
        /*@media print and (min-width: 900px) {
            body {
                background-color: red;
            }
        }*/
        

        /*
            4. 媒体查询中的逻辑
                与( and )
                或( , )
                非( not )
        */
	
	与
        /*@media screen and (min-width: 900px) and (max-width: 1024px) {
            body {
                background-color: red;
            }
        }*/

	或
        /*@media screen and (min-width: 1024px), (max-width: 900px) {
            body {
                background-color: red;
            }
        }
        @media screen and (min-width: 1024px), screen and (max-width: 900px) {
            body {
                background-color: red;
            }
        }*/

	非	
        /*@media not screen and (min-width: 900px) and (max-width: 1024px) {
            body {
                background-color: red;
            }
        }*/
        /*@media not screen and (min-width: 1024px), screen and (max-width: 900px) {
            body {
                background-color: red;
            }
        }*/
        

        /*
            5. 媒体特征表达式
                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 screen and (min-width: 900px) {
            body {
                background-color: red;
            }
        }*/
        @media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {
            body {
                background-color: red;
            }
        }


媒体查询开发策略：

断点：
xs      <576px                 显示1个
sm     576px-768px        显示2个
md    768px-992px        显示4个
lg      992px-1200px      显示6个
xl      >1200px               显示12个


 /*
            断点
                xs: < 576px
                sm: 576px ~ 768px
                md: 768px ~ 992px
                lg: 992px ~ 1200px
                xl: > 1200px
            断点怎么来的
                改变屏幕大小，当页面显示不正常的时候，你就需要设置断点了
                经验值
                    预设一些
        */
        /*
        //基础写法
        @media (max-width: 576px) {
            .col {
                width: 100%;
            }
        }
        @media (min-width: 577px) and (max-width: 768px) {
            .col {
                width: 50%;
            }
        }
        @media (min-width: 769px) and (max-width: 992px) {
            .col {
                width: 25%;
            }
        }
        @media (min-width: 993px) and (max-width: 1200px) {
            .col {
                width: 16.6666666667%;
            }
        }
        @media (min-width: 1201px) {
            .col {
                width: 8.333333333%;
            }
        }*/

        /*pc first*/
        //先考虑电脑端	   精简写法。	

        /*
            .col {
            width: 8.333333333%;
        }
        @media (max-width: 1200px) {
            .col {
                width: 16.6666666667%;
            }
        }
        @media (max-width: 992px) {
            .col {
                width: 25%;
            }
        }
        @media (max-width: 768px) {
            .col {
                width: 50%;
            }
        }
        @media (max-width: 576px) {
            .col {
                width: 100%;
            }
        }*/

        /*mobile first*/
        首先考虑移动优先来写
        .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%;
            }
        }

==============================================


★FELX 布局基础

★flex语法篇(汇总)


★Flex布局教程(实例篇)

★Flex布局教程(实例篇)


★试用栅格系统完成响应式布局(速查)

★试用栅格系统完成响应式布局(速查)


==============================================
移动端的单位

em  平时不怎么用。

<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;
            }

        /*body {
            font-size: 20px;
        }*/

        html {
            font-size: 12px;
        }
        .tabbar-container {
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 1000;
            width: 100%;
            
            /*height: 5em;
            font-size: 12px;*/
            /*font-size: 12em;*/

            /*height: 5rem;*/

            /*width: 100vw;
            height: 10vh;*/
            background-color: #fff;
            box-shadow: 0 0 10px 0 rgba(154, 141 ,141, 0.6);

            height: 50px;
            /*
                height
                    375px -> 100%(375px) x 50px
                    750px -> 100%(750px) x 100px
                    ?(视口宽度) -> (? / 750) * 100 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    height = (document.documentElement.clientWidth / 750) * 100 px
                    height = (document.documentElement.clientWidth / 375) * 50 px
            */

            /*
                用px/em做单位，每次都要用js一一修改
                能不能统一修改呢？
                    375px -> 1rem = 20px;
                        height = 50 / 20 = 2.5rem;
                    750px -> 1rem = 40px;
                        height = 100 / 40 = 2.5rem;
                    ?(视口宽度) -> 1rem = (? / 375) * 20 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    1rem = (document.documentElement.clientWidth / 375) * 20 px
                    1rem = (document.documentElement.clientWidth / 750) * 40 px
                    height = 2.5rem;
            */
            /*375px 1rem = 20px;*/
            height: 2.5rem;
        }
        .tabbar-link .iconfont {
            /*font-size: 24px;*/
            font-size: 1.2rem;
            /*font-size: 2em;*/

            /*
                font-size
                    375px -> 24px
                    750px -> 48px
                    ?(视口宽度) -> (? / 750) * 48 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    font-size = (document.documentElement.clientWidth / 750) * 48 px
                    font-size = (document.documentElement.clientWidth / 375) * 24 px
            */
            /*
                用px/em做单位，每次都要用js一一修改
                能不能统一修改呢？
                    375px -> 1rem = 20px;
                        font-size = 24 / 20 = 1.2rem;
                    750px -> 1rem = 40px;
                        font-size = 48 / 40 = 1.2rem;
                    ?(视口宽度) -> 1rem = (? / 375) * 20 px
                    ?(视口宽度) = document.documentElement.clientWidth
                    1rem = (document.documentElement.clientWidth / 375) * 20 px
                    1rem = (document.documentElement.clientWidth / 750) * 40 px
                    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;">
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        我是短路
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
        adasdasdasdasd
    </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>

==================================================

简单的适配原理。

1，使用 rem 单位。

如果 设计稿  宽是   750px 
则   随便估一个值。 18.75 

宽  1rem = 750/18.75 = 40
高  100/40 = 2.5rem;

==========================================

1，使用css的预处理器来获得。
2，工程化的手段。
3，按装插件



==========================================
通过 js  获得 视口的宽

怎么样来求视口宽呢？
document.getElement.getBoundingClientRect();
document.getElement.getBoundingClientRect().width;
window.innerWidth;


==========================================

写一个函数，封装起来。

setRemUnit();

window.addEventListener('resize', setRemUnit);

         function setRemUnit() {
             var docEl = document.documentElement;
             var ratio = 18.75;
             var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;

             docEl.style.fontSize = viewWidth / ratio + 'px';
         }

放到 <script src="js/simple.js"></script>

以下是 simple.js 文件内容
(function(){
	'use strict';
	setRemUnit();

	window.addEventListener('resize', setRemUnit);

         function setRemUnit() {
             var docEl = document.documentElement;
             var ratio = 18.75;
             var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;

             docEl.style.fontSize = viewWidth / ratio + 'px';
         }	

})()


==========================================


常用public css

/* public */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: #5d655b;
}

a {
    font-size: 12px;
    color: #686868;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

li {
    list-style: none;
}

img {
    vertical-align: top;
    border: none;
    width: 100%;
}

==========================================

封装的 js 适配

(function () {
    'use strict';

    // dpr->scale = 1 / dpr
    var docEl = document.documentElement,
        viewportEl = document.querySelector('meta[name="viewport"]'),
        dpr = window.devicePixelRatio || 1,
        maxWidth = 540,
        minWidth = 320;

    dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);

    docEl.setAttribute('data-dpr', dpr);
    docEl.setAttribute('max-width', maxWidth);
    docEl.setAttribute('min-width', minWidth);


    var scale = 1 / dpr,
        content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';

    if (viewportEl) {
        viewportEl.setAttribute('content', content);
    } else {
        viewportEl = document.createElement('meta');
        viewportEl.setAttribute('name', 'viewport');
        viewportEl.setAttribute('content', content);
        document.head.appendChild(viewportEl);
    }

    setRemUnit();

    window.addEventListener('resize', setRemUnit);

    function setRemUnit() {
        var ratio = 18.75;
        var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;

        // console.log(viewWidth);

        if (maxWidth && (viewWidth / dpr > maxWidth)) {
            viewWidth = maxWidth * dpr;
        } else if (minWidth && (viewWidth / dpr < minWidth)) {
            viewWidth = minWidth * dpr;
        }

        docEl.style.fontSize = viewWidth / ratio + 'px';
    }
})();


======================================================================================

<!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>2.3 简单适配应用</title>
    <link rel="stylesheet" href="css/1.css">
    <script src="js/simple.js"></script>
</head>

<body>
<style>
    /* public */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: #5d655b;
}

a {
    font-size: 12px;
    color: #686868;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

li {
    list-style: none;
}

img {
    vertical-align: top;
    border: none;
    width: 100%;
}


/* header */


/* 继承html body */


/* 1rem = 20; */

.header {
    height: 5rem;
    background-color: aqua;
    top: 0;
}

.main {
    padding: 2.5rem 0;
    height: 30rem;
}

.main-slide {
    height: 10rem;
    background-color: blueviolet;
}

.main-nav {
    height: 10rem;
    background-color: bisque;
}

.main-recom {
    height: 10rem;
    background-color: brown;
}

.tabbr {
    height: 5rem;
    background-color: black;
    bottom: 0;
}

.header,
.tabbr {
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
}
</style>
    <header class="header">

    </header>

    <div class="main">
        <div class="main-slide"></div>

        <nav class="main-nav"></nav>

        <div class="main-recom"></div>
    </div>

    <div class="tabbr"></div>

</body>

</html>
移动端开发先把类似PC端基础的写法+媒体查询写好，再使用一些前端的框架！
移动基础

我们要如何帮助您？
