首页

# 移动端开发

  1. 添加 viewport

  2. 内部布局
    弹性布局 + 文字等如何保持等比例

  3. 图片自适应（让它 100%）

  4. 适当使用响应式

  5. 移动端开发的其他问题

# 移动端开发的现实问题

  1. 设计师一般只会根据主流机型设计一套 UI 界面，工作即结束。那么所有的适配屏幕的工作都会交给前端来处理

  2. 手机端屏幕尺寸各异，如何像 UI 那样，只需要写一套移动端代码就能适配所有的屏幕，并能保证一致的用户体验？
    要找到一种方式：等比例适配。
    比如设计师针对的是 iPhone8 做的一套设计（750px）, 前端拿到 UI 设计搞后，也可以根据 iPhone8 的屏幕做前端开发，然后在根据不同的屏幕做等比例缩放即可。iPHone 8plus

# 如何适配所有的移动端的秘诀：px - 转 rem

rem? rem 是一个相对单位。就像 %。r 指的是 root, 即 HTML 元素。
rem 针对 HTML 元素的 font-size 进行的一个等价转换。

公式：1rem 等 HTML 元素的 font-size 的值。

比如 html 的 font-size:16, 此时 1rem=16px

比如 HTML 的 font-size:30px, 此时 1rem=30px;

如果 font-size:50px,1rem=50px;

即 rem 就是跟 HTML 的 font-size 挂钩的。

# 移动端开发的步骤

  1. 添加 viewport 完整版

  2. 盒模型启用怪异盒模型（建议）

  3. 添加 px - 转 rem 公式代码

    1
    2
    3
    4
    (function(){
       var w=window.innerWidth;
       var bili=w/3.75;          	document.documentElement.style.fontSize=bili+"px";
    })();

  4. 根据设计师的设计稿来定比例
    比如设计师的设计搞是 750px, 那么将上面的 3.75，即

    1
    2
    3
    4
    var bili=w/3.75;改为
    var bili=w/7.5;
    //假设设计稿是640px,
    var bili=w/6.4;//100px

  5. 根据设计稿来量尺寸，设计稿量出来的尺寸是多少，就转写成对应的 rem
    比如：设计稿量出的一个 div 的尺寸是：60x40px
    在写 css 代码时，就直接写 0.6remx    0.4rem

  6. 开发时的模拟器也调为跟设计一样大小的模拟器

  7. 切换到其他模拟器去看看比例是否保持一致即可。

# 移动开发实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 第一步：加meta标签 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="font_892876_p14t7c08ju/iconfont.css">
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            /*所有的盒子都使用怪异模型*/
            box-sizing: border-box;
        }
    </style>
    <!-- 第二步：查看设计图宽度大小，如果是375，那么把浏览器的模拟器的大小也改为375，这样设计图量出来的尺寸是多大，那在页面中写的px也是多大 -->

    <!-- 第三步：将px转rem的公式代码放到这里 -->
    <script>
        var width = window.innerWidth;
        //6.4是根据设计图的大小除以100
        var bili = width / 6.40;
        document.documentElement.style.fontSize = bili + "px";
        // 此时  100px=1rem
        // 将所有在设计图量出的尺寸都除以100即可转为对应的rem
    </script>

    <!--页面的样式 -->
    <style type="text/css">
        /*重置样式*/
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /*公共样式*/
        .clearfix:after {
            content: "\20";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden
        }

        .clearfix {
            *zoom: 1
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .vam {
            vertical-align: middle;
        }

        /*内容样式*/
        body {
            font-size: 0.16rem;
            /*16px*/
            background-color: #efedf0;
        }

        .head {
            height: 0.95rem;
            line-height: 0.95rem;
            background-color: #ef3239;
            color: #fff;
        }

        .title {
            font-size: 0.32rem;
        }

        .icon-caidan {
            color: #fff;
            font-size: 0.24rem;
            padding-left: 0.37rem;
            width: 25%;
        }
        .mid{
            width: 50%;
            height: 100%;
            text-align: center;
        }
        .icon-suo {
            font-size: 0.22rem;
            margin-right: 0.23rem;
        }

        .icon-shuaxin {
            font-size: 0.30rem;
            padding-right: 0.35rem;
            width: 25%;
            text-align: right;
        }
        .nav{
            height: 0.87rem;
            line-height: 0.87rem;
            border-bottom: 1px solid #ccc;
        }
        .nav>div{
            width: 25%;
            /* text-align: center; */
            color: #848689;
            position: relative;
            text-align: center;
        }
        .nav>div span{
            font-size: 0.28rem;
        }
        .nav>div i{
            position: absolute;
            display: inline-block;
            font-size: 0.3rem;
        }
        .nav .red,.red{
            color: #f23838;
        }
        .left{
            width: 40%;
        }
        .left img{
            border-radius: 0.08rem;
            width: 100%;
            height: 100%;
            margin: auto;
            /* margin: 0.15rem; */
        }
        .left>div{
            width: 2rem;
            height: 2rem;
            margin: auto;
        }
        .rig{
            /* width: 3.7rem; */
            width: 55%;
            margin-left: 0.28rem;
        }
        .rig h2{
            font-size: 0.22rem;
            font-weight: normal;
            line-height: 0.35rem;
        }
        .rig .pri{
            font-size: 0.24rem;
            margin-top: 0.2rem;
        }
        .coment{
            font-size: 0.2rem;
            margin-top: 0.22rem;
        }
        .list{
            position: relative;
            top: 1.82rem;
            left: 0;
        }
        .list li{
            border-bottom: 1px solid #ccc;
        }
        .list li>div{
            width: 95%;
            margin: 0 auto;
            padding: 0.2rem 0;
        }
        .gray{
            color: #808080;
        }
        .head{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1;
        }
        .nav{
            position: fixed;
            left: 0;
            width: 100%;
            top:  0.95rem; 
            z-index: 1;
            background-color: #efedf0;
        }
    </style>
</head>

<body>
    <!-- 記住將设计图量出的px除以100得到对应的rem 
    比如：10px==> 0.1rem
    -->
    <div class="box">
        <div class="head clearfix">
            <i class="iconfont icon-caidan fl"></i>
            <div class="mid fl">
                <i class="iconfont icon-suo"></i>
                <span class="title">首页</span>
            </div>
            <i class="iconfont icon-shuaxin fr"></i>
        </div>
        <div class="nav clearfix">
            <div class="all fl red">
                <span>综合</span>
                <i class="iconfont icon-iconfontjiantou fr"></i>
            </div>
            <div class="num fl">
                <span>销量</span>
            </div>
            <div class="price fl">
                <span>价格</span>
                <i class="iconfont icon-jiantou-copy-copy-copy fr"></i>
            </div>
            <div class="choice fl">
                <span>筛选</span>
                <i class="iconfont icon-shaixuan fr"></i>
            </div>
        </div>
        <ul class="list">
            <li class="clearfix">
                <div class="clearfix">
                    <div class="left fl">
                        <div><img src="iphone.png" alt=""></div>
                    </div>
                    <div class="rig fl">
                        <h2>苹果(Apple)iPhone 8(A1863) 16GB 金色 移动联通电信4G手机</h2>
                        <p class="pri red">￥ 4888.00</p>
                        <p class="coment gray">好评96% 59091人</p>
                    </div>
                </div>
            </li>
            <li class="clearfix">
                <div class="clearfix">
                    <div class="left fl">
                        <div><img src="iphone.png" alt=""></div>
                    </div>
                    <div class="rig fl">
                        <h2>苹果(Apple)iPhone 8(A1863) 16GB 金色 移动联通电信4G手机</h2>
                        <p class="pri red">￥ 4888.00</p>
                        <p class="coment gray">好评96% 59091人</p>
                    </div>
                </div>
            </li>
            <li class="clearfix">
                <div class="clearfix">
                    <div class="left fl">
                        <div><img src="iphone.png" alt=""></div>
                    </div>
                    <div class="rig fl">
                        <h2>苹果(Apple)iPhone 8(A1863) 16GB 金色 移动联通电信4G手机</h2>
                        <p class="pri red">￥ 4888.00</p>
                        <p class="coment gray">好评96% 59091人</p>
                    </div>
                </div>
            </li>
            <li class="clearfix">
                <div class="clearfix">
                    <div class="left fl">
                        <div><img src="iphone.png" alt=""></div>
                    </div>
                    <div class="rig fl">
                        <h2>苹果(Apple)iPhone 8(A1863) 16GB 金色 移动联通电信4G手机</h2>
                        <p class="pri red">￥ 4888.00</p>
                        <p class="coment gray">好评96% 59091人</p>
                    </div>
                </div>
            </li>
            <li class="clearfix">
                <div class="clearfix">
                    <div class="left fl">
                        <div><img src="iphone.png" alt=""></div>
                    </div>
                    <div class="rig fl">
                        <h2>苹果(Apple)iPhone 8(A1863) 16GB 金色 移动联通电信4G手机</h2>
                        <p class="pri red">￥ 4888.00</p>
                        <p class="coment gray">好评96% 59091人</p>
                    </div>
                </div>
            </li>
            <li class="clearfix">
                <div class="clearfix">
                    <div class="left fl">
                        <div><img src="iphone.png" alt=""></div>
                    </div>
                    <div class="rig fl">
                        <h2>苹果(Apple)iPhone 8(A1863) 16GB 金色 移动联通电信4G手机</h2>
                        <p class="pri red">￥ 4888.00</p>
                        <p class="coment gray">好评96% 59091人</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>

# 移动端常见的问题

一)、默认样式

1、清除点击阴影  
-webkit-tap-hightlight-color:transparent;

2、消除按钮圆角 -webkit-apprearance:none

3、选中文字设置 -webkit-user-select:none

4、禁止文字缩放 -webkit-text-size-adjust:none

5、默认字体设置  Helvetica
    PC端默认字体为宋体或微软雅黑
    移动端则根据系统不同，默认字体各不相同，但有一款字体是都相同的，那就是Helvetica，所以一般使用
    font-family:"Microsoft Yahei","Helvetica Neue",Helvetica; 其他的使用默认的系统字体即可。
    还写微软雅黑的目的主要就是该页面在PC端看时会有个参考字体

6、让字体更顺滑（无锯齿）-webkit-font-smoothing:antialiased

7、如果没有给body添加overflow，当往屏幕边缘滑动时，可继续滑动，类似于出现了横向滚动条的效果。
    解决方法：在body处添加  overflow-x:hidden;

以上所有问题的解决方法：使用移动端网站开发模板（带有reset.css）

二)、移动端事件

a、问：PC上的事件可以在手机端使用吗？
    答：可以

b、但手机端有专门的事件：

    1、touch事件
        类似于鼠标移入，移动，移出事件
        a、touchstart:手指触摸到屏幕会触发
            手指摁下去

        b、touchmove:当手指在屏幕上移动时，会触发

        c、touchend:当手指离开屏幕时，会触发


c、可以使用jquery开发吗？
    答：不建议使用jquery，可以使用jquery的替代版：zepto.js 通过教程讲解。

    zepto.js  移动端的jquery。

    tap类事件(此类事件为自定义事件，使用zepto支持，用来替代click)

    触碰事件，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分，存在点透问题，即会冒泡
        tap: 手指碰一下屏幕会触发
        longTap: 手指长按屏幕会触发
        singleTap: 手指碰一下屏幕会触发
        doubleTap: 手指双击屏幕会触发

也可以使用原生JS开发。

五)、移动端上使用的插件特效介绍

1、layer.js  移动端弹框效果--js插件
	PC端的同款插件，同一个作者
https://layer.layui.com/mobile/

2、touchSlide.js 移动端幻灯片、tab切换等特效插件-js插件

3、公式代码
	window.innerWidth而要改用：var w=document.documentElement.getBoundingClientRect().width ？？？
	答：
	为什么不用window.innerWidth(在移动端中，innerWidth表示页面的宽)
        innerwidth  返回窗口的文档显示区的宽度（页面的宽）。
        document.documentElement.innerWidth  为undefined。
        document.body.innerWidth  为undefined。
        只能使用window.innerWidth;
        而且：
           window.innerWidth = width + padding + border + 纵向滚动条宽度
            window.innerHeight = height + padding + border + 横向滚动条高度
        在部分浏览器中window.innerwidth有兼容性问题
        
4、综上，使用getBoundingClientRect是最合适的，兼容性非常好，它不会受网页内容放大缩小滚动条等的影响，而且它表示的是在视口中表示HTML的可见部分。
更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

tz 微信支付

微信支付

tz 支付宝

支付宝