移动端开发

移动端开发

1、移动端测试

 

一、浏览器测试检查就能够测试（模拟各类设备）

Google、Firefox、IE……

A、除了本身自带的几个手机尺寸外，还能够本身编辑自定义尺寸

B、（这里只能模拟手机的尺寸）

二、真机测试

A、要真机测试就须要一台模拟服务器

B、xmapp下载 

C、xmapp安装

D、wampService下载

E、wampService安装

F、要让手机和电脑在同一个网络下，

而后经过手机访问服务地址，在手机上看手机页面，用手机看一遍

 

 

 2、移动端视口问题

 

 

4、移动端经常使用设置

 

5、移动端的一些问题

 

 

一、移动端按钮的圆角问题

 

 

 

 

二、移动端字体问题

移动端每一个手机他都会本身带有本身特定的字体，你设置了也没用。

因此只用设置一个下面的字体就能够了（下面是全部手机都能识别的字体类型）

 

三、文字缩放问题

有些移动端在切换页面时他会将页面的文字进行缩放

四、移动端长按会选中文字

 

 五、a标签和按钮点击时的一个高亮颜色设置

通常能够设置成半透明或者全透明

 

 

 六、fontBoosting

两段文字设置一样的字体大小，可是底下那一段文字字体会比上面的文字大不少，那就时出现了fontboosting问题

可是这种问题有时候才会出现

遇到相似问题的解决方案

七、固定定位的问题，之前兼容性不是很好。如今也是有不少小问题

好比抖动问题

移动端最好不要用固定定位这一个坑

可是淘宝的固定定位上下的并无出现固定定位这种现象

能够经过CSS模拟固定定位——效果不是很好，而且页面自己会出现回弹效果

能够经过事件解决

八、在IOS下面，给body设置overflow依然会有溢出现象

这个时候应该在body下面包一层，在wrap上面设置overflow样式

body上面的样式不变

 

6、移动端适配问题

一、百分比适配的话只能解决宽度适配问题

 

二、viewport适配

让全部的设备的宽度一致

以320px为准。除以4就是320乘以25%获得一个具体的数值

 

 

三、rem适配问题

针对于平分时由于有边框border样式而致使没法作到平分

节点寻找

当选取得设计稿是以320px为准的，

你按照设计稿要求还原设计稿后你的东西也只能说在对应的320px的设备下看上去正常

当超过或者低于这个320px，设计稿就会乱套

rem适配不只能解决宽度屏幕适配问题、像素比例问题，还能够设置字体大小等凡有大小设置地方的适配问题

rem适配原理（找到一个根节点为参照目标，全部的涉及大小设置的所有以这个大小为准来设置，也就是一个基准）

rem适配代码

rem适配的问题就是计算量太大，计算器都得按爆

解决问题：LESS+Kola——完美计算rem

利用less去计算——less是一种预编译语言——能够帮助咱们计算全部的rem值

能够经过kola帮忙咱们自动编译出rem的值

css代码

less代码

 

 

 less使用

把css文件夹拖到kola里面

 

 

 

less其余做用

less代码：

 

 

 

 

 

 

 

 

 

Bootstrap自定义字体

下载对应文件，找到自定义字体对应的代码，摘出来在单独引用

bootstrap官网

 

在bootstrap.css里面找到相关代码进行调整

 

找到如下文件而后删除上面的全部东西

精简事后的文件就由原来的6000多行变成了600多行

这也就是全部所须要的自定义字体代码。

7、弹性盒模型

 

只要设置了div样式为display:flex，就会有如下概念

 

 

 

 

 

原始代码：

原始效果图：

 

flex代码：

 

flex效果图：

出现问题：好用的东西都会出现兼容性问题

在移动端有部分机型是不支持FLEX的

 

 

 

 

 

 

 

 

 

 

 

用于元素子集样式

子集元素大小占据父级比例大小

子集元素位置排序

 

 

 

 

 

 

 

 

 

 

 

 

 

——————————————为了解决这个问题，就须要使用老版的弹性盒模型—————————————

 

用于元素子集样式

8、响应式

响应式的诉求

响应式媒体查询

 

 

 

只是初步的判断屏幕垂直与水平，只是判断宽度和高度大小

 

响应式引用样式表方式方法一

响应式引用样式表方式方法二

 

 

9、移动端事件

 

移动端抬起比PC端鼠标抬起要快一点