移动端适配的那点事

时间 2019-12-12

标签移动适配那点栏目无线繁體版

原文原文链接

前言

目前，在实际用户使用习惯中，会有不少的用户并不会直接下载APP进行使用，而是采起移动端浏览器直接搜索。对于移动端web页面，有哪些小细节须要注意？对于五花八门的屏幕如何适配？且听下文慢慢道来。。。css

移动端适配特色分析

在本人移动端开发学习中总结了一下几个特色：html

移动端的屏幕不大，显示的内容将远少于PC端。这就意味着布局将会变得简单。
移动端为了适配不一样的屏幕，通常都是通栏流式布局。而左右布局则较少。
移动端通常都是最新的浏览器。

移动端的主流浏览器主要有：QQ浏览器、百度浏览器、safair浏览器、UC浏览器。这些浏览器的内核都是webkit（或者比这个更高级的内核） ==>这就意味着咱们只须要作webkit的兼容便可，没必要像PC端兼容那么多的浏览器。另外移动端浏览器对 H5 和 css3兼容很好。css3

像素

如今移动端的屏幕都是高清显示屏，或者称为视网膜屏（retina屏），这种屏幕会将更多的物理像素挤压到一块屏幕里。web

物理像素：设备上真实的物理单元。数组

设备独立像素：屏幕上1px真实显示的大小。浏览器

设备像素比（DPR）：物理像素和设备独立像素的比值。简单的说就是一个设备独立像素能够塞进几个物理像素。框架

图片失真

因为高清屏的出现，随之给页面显示带来一个问题：图片失真。为何会出现图片失真的状况呢？举个例子：有个10px10px的图片进行展现，你若是在高清屏中仍然将这张图片展现为10px10px的大小，若是该屏幕是个2倍屏，那么咱们其实是以20px20px的物理像素展现的以前10px10px的图片。显然图片被分散到更多的物理像素点上展现，图片质量降低，图片失真。如何解决这个问题呢？且听下文分晓。less

流行设计稿尺寸

目前市面上流行的设计稿主要有两种。移动端web

设计稿宽度640px的。这种设计稿是以iPhone4（width320px）为基准
设计稿宽度750px的。这种设计稿是以iPhone6（width375px）为基准

固然也有一些设计稿宽度大于1000px。当你使用百分比布局的时候，小于1000px的通常除以2，大于1000px的除以3。函数

因此，对图片失真咱们的解决方案是：将图片进行压缩：

当图片做为背景图时，使用background-size属性进行压缩。
看成为img时：经过压缩width和height来实现。

移动端适配方案

若想适配移动端浏览器，咱们还须要知道，PC端浏览器和移动端浏览器对xxx.html展现时的区别。区别在于：移动端会在页面结构外包裹一层虚拟容器----viewport，而PC端则是直接加载页面的。

那咱们如何验证呢？当咱们给根元素设置width：100%，在移动端展现的时候，发现页面的宽度并非浏览器的宽度，页面出现了滚动条。显然根元素的width：100%并非相对于浏览器的100%。

其实，如今它是相对于viewport的width：100%

viewport的特色以下：

viewport是移动端浏览器特有的。
主流浏览器viewport默认宽度是960px。
可缩放
可设置宽度
可设置是否容许用户缩放页面
承载网页

viewport常见参数：

width ：设置视口宽度
initial-scale ：设置视口的默认缩放比
user-scalable : 设置视口是否容许用户自行缩放
minimum-scale : 最小运行缩放比
maximum-scale : 最大运行缩放比

《meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/》

百分比布局（流式布局）适配方案

这种适配方案，是将width使用百分比，而高度进行写死。具体作法就是，对宽度使用百分比布局，高度的则针对设计稿进行2倍或者3倍的压缩后写死。

缺点：这种适配方案只作到了，宽度的自适应，对于高度并作不到自适应，不一样屏幕显示的内容多少是不同的。

等比例布局（rem结合css3媒体查询）

1、rem和em的区别

相同点： rem和em都是相对单位。

区别： rem是基于根元素html的字体大小来的，而em是基于父容器的字体大小来的。

2、css3的媒体查询

响应式开发：随着不一样的终端愈来愈多，人们针对不一样终端都要开发相对应的一套页面。而响应式开发则是一套页面适配多个终端的开发方案。

如今屏幕划分：

超小屏也就是手机--->768px--->小屏（iPad）---> 992px---> 中屏(老式的台式电脑)--->1200px--->如今的笔记本，台式电脑

媒体查询语法：

@media screen and (min-width:1200px) and *** {
             // 能够写样式 （选择器）
     }
复制代码

注意：

and 后面必定有空格。
能够写多个and添加多个条件。
能够写多个@media造成连贯区间。
符合媒体查询条件的样式会生效，将以前的样式进行覆盖。（只会覆盖重复的）
媒体查询是从上到下执行的，符合条件样式就会生效，因此须要注意条件的排列顺序。

简写：

@media （min-width:1200px）{
         
     }
复制代码

等比例布局的核心思想就是：等比例缩放。即将设计稿定比例缩放到你屏幕能够显示的程度。

比例：设计稿宽度： 100px = 屏幕宽度：X

x = 屏幕宽度 * 100 / 设计稿宽度

这里100px 是一个基准值，写为100px的缘由无非是为了方便计算。而这里获得的X将做为HTML的fon-size的属性值。

很明显这里涉及到了计算，传统的css并不能知足需求，在这里咱们使用less来完成适配。固然，使用JS也能够实现，但本人推荐使用媒体查询来完成。

在全局的less文件中，代码以下：

//定义变量
      @psdWidth : 750 ; // 设计稿的宽度
      @baseSize : 100 ; // 基准值
      @deviceWidthList : 320px , 360px , 375px , ...., 750px ; // 所须要配置的主流设备
                                                               // 定义less数组
                                                               // 由于媒体查询条件，
                                                               // 须要从小排列到大
     .adapterFuc(@index) when (@index <= length(@deviceWidthList)){
         @media (min-width:extract(@deviceWidthList,@index)){
             html{
                 font-size : extract(@deviceWidthList,@index)/@psdWidth * @baseSize;
             }
         }
         .adapterFuc(@index + 1);
     }
     
     .adapterFuc(1);
复制代码

注释：

less 中提供length（数组）方法获取数组的长度。
less 中提供extract(数组，项数)方法用来获取数组中的某一项，项数是从 1 开始的。
less 中没有for循环相似的遍历结构。只能经过when添加条件和自调用

移动端事件

绑定事件建议

addEventListener('事件名'，回调函数)

1、touch事件（触屏支持）

touchstart ：触摸开始。手指刚刚触碰到屏幕的时候。
touchmove ：手指在屏幕上滑动的时候。这是一个不断触发的事件。
touchend ：触摸结束。手指离开屏幕。
touchcancel ：被迫停止滑动的时候。（来电）

touch事件的回调函数，第一个参数会接受touchEvent事件对象。包含触摸的相关数据。

触摸点集合，这是一种伪数组

changedTouches ：当前页面最新改变的触摸点集合。（能够全程记录）
targetTouches ：当前元素上面的触摸点集合。
touches : 当前页面上全部触摸点的集合。

2、click事件

移动端click点击事件，并不灵敏，有300ms的延迟。这样的缘由是由于，移动端须要时间判断是滑动仍是点击。可是这样形成的影响是：响应过慢，用户体验降低。

解决方案：

使用tap事件（能够理解为更快的点击事件），可是原生的JS并无提供这一个事件，须要以touch事件为基础进行封装。可是也有一些框架已经实现了这种事件，如：zepto.
使用 fastclick.js 插件。使用后能够直接使用click事件。

3、滑动事件（也是基于touch事件实现的）

小记一下本人新了解的原生事件：

transitionstart , transitionend ====> 为css3属性transition过分开始和结束的事件
animationstart ， animationend ====> 为动画开始和结束的事件

一些移动端容器布局

1、版心容器

.contain{
         width : 100%;
         max-width:640px;
         min-width:320px;
         margin : 0 auto;
         height : xxx
     }
复制代码

2、实现满屏效果

.contain{
         position : fixed;
         width : 100%;
         height : 100%;
     }
复制代码

原理：固定定位时，宽高相对于浏览器。

3、实现移动端左右布局

方案一：

页面结构以下：

<div class="wrap">
         <div class="left"></div>
         <div class="right"></div>
     </div>
复制代码

样式以下：

*{
        margin: 0;
        padding: 0;
     }
     .wrap{
        position: fixed;
        width: 100%;
        height: 100%;
        background: red;
     }
     .left{
        height: 100%;
        width: 100px;
        float: left;
        background: pink
     }
     .right{
        height: 100%;
        background: green;
        overflow: hidden;
     }
复制代码

使用的小技巧就是BFC模式。

若是不添加overflow属性的时候,.left盒子会影响.right盒子内容的显示的,这种影响并非遮挡，而是占用了.right盒子内容显示的空间。

而使用overflow属性将.right盒子设置为绝缘容器，这种容器至关于本身是一块独立的空间，即我不影响你，那么你也别想影响我。。。

方案二：

页面结构以下：

<div class="wrap">
         <div class="left"></div>
         <div class="right"></div>
     </div>
复制代码

样式以下：

*{
        margin: 0;
        padding: 0;
    }
     .wrap{
        position: fixed;
        width: 100%;
        height: 100%;
        background: red;
    }
     .left{
        height: 100%;
        width: 100px;
        background: pink;
    }
     .right{
        position: absolute;
        left: 100px;
        right: 0;
        top: 0;
        bottom: 0;
        background: gray
     }
复制代码

小技巧，position绝对定位，设置四个方向的距离，会将盒模型拉开。

结束

感谢你们阅读，本文主要是本人，工做学习的总结，若有错误，欢迎指出，共同进步。