产品 流式布局 rem布局

移动端

移动端概括

  • 移动端、H5、响应式布局、webApp、场景应用、微信二次开发…

移动端 : 运行在手机、平板、I TOUCH…上的产品

产品:

  • [x] APP:
    手机应用,大部分都是原生APP开发者做的
    • [ ] IOS : Object-C
    • [ ] 安卓 : java-native
      市场趋于用JS来开发原生的APP:(框架)React Native、phoneGap…
      优点：流畅、本机系统直接操作…
      缺点：不跨平台、需升级、ios审核…

  • [x] H5（移动端、响应式、webApp、场景应用、微信二次开发）:

    • 在IOS和安卓平台上的浏览器大部分都是webkit内核的,所以移动端H5不用处理兼容
    • [ ] PC端浏览器[谷歌、火狐、safari、欧朋、IE、360、搜狗…]

    • [ ] 移动端的浏览器[内置的、UC、QQ、百度、谷歌、safari…]

      优缺点：与APP相反

前端主要工作：

  • [x] PC和移动端共用：

    • （结构简单）比如：猎豹、华为…(响应式)
      • 一般采用流式布局法
        先做pc端再针对不同移动设备微调

  • [x] PC端和移动端不同 如：京东、淘宝、QQ…

    • PC端的项目不需要做响应式

    • 移动端的项目需要做响应式

      • 只做移动端一般用REM响应式布局

H5运行的环境:

  • [x] 移动端的浏览器 : UC、QQ、百度…

  • [x] 原生APP(Native App)的webView中:hyBrid模拟 例如：在微信中打开一个H5页面，是运行在微信的webView中的（微信现用内嵌Q浏览器运行微信中页面）

扩展
hyBrid模式概念：把H5页面嵌入到Native APP的webView中运行(类似浏览器，也是webkit内核的)
hyBrid模式参考

图42

hyBrid模式

  • [x] 多View混合型(目前常用的)

    • [ ] jsBridge(微信平台的JS SDK就是基于这个开发的)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      // 首先引入微信提供好的一个JS：(App把JS中提供的方法注入到了web view中， 引入JS可调用App的方法)
      http: / /res.wx.qq.com / open / js / jweixin - 1.0 .0.js
      wx.config({
          debug: false,
          appId: "你的AppID",
          timestamp: '时间戳(需要后台生成)',
          nonceStr: '字符串(需要后台生成)',
          signature: '签名(需要后台生成)',
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
          功能列表， 我们要使用JS - SDK的什么功能
      });
      // 调取ready方法,web view中注入的对象其实就是wx.read就是提供的一个方法，此处的匿名函数就是我们传递进去的callback， 当微信检测到已经准备就绪的时候就会把我们的callback执行 
      wx.ready(function() {
          获取“ 分享到朋友圈” 按钮点击状态及自定义分享内容接口 wx.onMenuShareTimeline({ title: '分享标题', link: "分享的url,以http或https开头", imgUrl: "分享图标的url,以http或https开头" });
      });

    • [ ] 伪装的URL或者伪装的协议

      1
      2
      3
      4
      5
      6
      7
      8
      function fn(img) { 
      //->打开摄像头拍照后执行的后续操作 img是拍下来的照片     
      }     
      window.location.href="xieyi://phone?callback=fn"; //jsonp
      //->xieyi:// 就是我们事先制定的一个假协议，这种协议都代表需要调取App的某个功能     
      //->phone 这个标识是事先制定的需要调取拍照功能     
      //->callback=fn 把自己JS中的某一个方法传递给App，App可以在拍照完成后执行这个方法，并且把保存的照片传递给这个方法(类似于JSONP)

  • [x] Web主体型(目前比较新颖流行的方式)

  • [x] 单View混合型

高清屏

苹果手机是2倍高清屏幕的，200200的尺寸压缩100100图片（苹果手机素材图需比尺寸大一倍）
h5一般只准备最大的图（影响需小尺寸手机性能）

  • [ ] DPI适配思想：

    最好每一张素材图片都准备两套或者三套，比如：
    logo.png 100100
    logo@2x.png 200    200
    logo@3x.png 300*300

  • [ ] 媒体查询 : @media

    • 1) 媒体设备 : all所有设备 screen所有屏幕设备(PC、移动端 print打印机设备 …)
    • 2) 媒体条件 : 指定在什么样的条件下执行对应的样式
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      @media all and (max-width:319px){ //->宽度小于320px
           .box{
              height:110px;
           }
        }
      @media all and (min-width:320px) and (max-width:359px){//-> >=320 <360
           .box{
              height:120px;
           }
        }
      @media all and (device-pixel-ratio:2.0){//-> 2倍屏
           .box{
              height:120px;
           }
        }

苹果手机的尺寸:5s及以下都是320px 6是375px宽度 6plus是414px宽度
常用的安卓机尺寸:320、360、480、540、640、720…
在真实项目中，设计师给我们的设计稿一般都是：640960 / 6401136 / 750*1334

响应式布局

meta标签参考
移动端meta标签参考

  • 在不同的设备上都能给予客户最好的操作体验

  • [x] 搭建一个H5页面设置VP（两种方式）

    • [ ] 添加一个META标签(WB中输入meta:vp按下TAB键自动生成)
      1
      2
      <meta name="viewport"
                 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- [ ]  JS动态设置VP:

1
2
3
4
var oMeta=document.createElement('meta');
 oMeta.name='viewport';
 oMeta.content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0';
 document.head.appendChild(oMeta);

  • [x] 各种参数概念

    • [ ] viewport : 视口
    • [ ] width=device-width设置为设备宽度,不设置时移动端默认980px (浏览器的宽度–设备宽变化时不缩小)

    • 移动端呈现pc端页面

      |设置与否|浏览器宽（clientWidth）|是否有滚动条|
      |:–:|:–:|:–:|
      |不设置|固定980/784|无滚动条，整个页面缩放呈现|
      |设置|设备宽|有滚动条|

- [ ]   `user-scalable=no`:禁止用户手动缩放

- [ ]   `initial-scale=1.0、 maximum-scale=1.0、minimum-scale=1.0`设置屏幕最大、最小、默认的缩放比例

响应式布局的解决方案:

流式布局法

  • [x] 不设固定宽，用百分比(相对于视口区域的百分比)
  • [x] 其余的样式 : 字体、高度、MARGIN、PADDING等设计稿上标注的一半来设置
  • [x] 对于有些屏幕尺寸下,设置的固定值不好看的话,使用@media进行微调整

常用尺寸
苹果手机的尺寸:
4：320 480
5：320 568
6：375 627
6plus：414736（3倍高清：一般要1280px的）
常用的安卓机尺寸:320、360、480、540、640、720…
在真实项目中，设计师给我们的设计稿一般都是：640960 / 6401136 / 750*1334

特殊情况：设计稿是640px，素材图也是640px的，此时在iphone6/iphone6 plus展示的时候，图片不够大需找设计师要一张更大的图，一般要1280px的

1
2
3
4
5
6
7
8
9
10
11
12
// 处理特殊情况6/6p
@media all and (-webkit-min-device-pixel-ratio: 2) and (min-width:321px){
     .box{
        background:url('bannner@big.png')...
     }
  }
//处理安卓大屏
@media all and (min-width:641px){
     .box{
        background:url('bannner@big.png')...
     }
  }

REM响应式

  • 元素的REM单位的样式值都针对HTML元素的fontSize的值进行动态计算的

  • [x] H5页面只在移动端访问 ( REM 不兼容低版本 的浏览器)

  • [x] 使用步骤

    • [ ] 第一步：拿到设计稿(PSD格式的设计稿) 640*1136

    • [ ] 第二步：在样式中给HTML设定fontSize的值，一般设置方便计算的值100px

      1
      2
      3
      html {
        font-size: 100px; /*1REM=100PX*/
      }
- [ ]  `第三步`：写页面，写样式
    - 完全按照设计稿的尺寸
    - 需把得到的像素值除以100，计算出对应的REM的值

>**注意**：项目中外层盒子的宽一般不写固定值，沿用流式布局法的思想，用百分比的方式布局)
>
1
2
margin: 0 0.2rem;//代替width:6rem;
>



- [ ]  `第四步`：**屏幕改变**：根据当前屏幕的宽度和设计稿的宽度来计算HTML的fontSize的值
|设计稿|最大盒子|盒子样式|fontsize|
|:---:|:---:|:--:|:--:|
|640| 600*300|6rem*3rem|**暂定100** |

|屏幕改变|最大盒子|盒子样式|fontsize|
|:---:|:---:|:--:|:--:|
|320|(5x50)*(3x50)|6rem*3rem|**改为50**|
|375|6fs*3fs|6rem*3rem|**改为fs=(375/640)*100** |



1
2
3
4
5
6
7
8
9
10
11
12
13
~ function() {
    var desW = 640,
        winW = document.documentElement.clientWidth,
        ratio = winW / desW;
    //->如果当前屏幕的宽度大于设计稿,为了保证图片的良好展示,以设计稿的宽度为最后宽度,剩余的部分留空白显示(京东...)
    var oMain = document.getElementById('main');
    if (winW > desW) {
        oMain.style.width = desW + 'px';
        oMain.style.margin = '0 auto';
        return;
    }
    document.documentElement.style.fontSize = ratio * 100 + 'px';
}();

拓展
移动端-PC端跳转

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
~function () {
    // 符合移动
    var reg1 = /AppleWebKit.*Mobile/i,
        reg2 = /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/;
> 
    //->条件成立说明当前页面是运行在移动端设备中的
    if (reg1.test(navigator.userAgent) || reg2.test(navigator.userAgent)) {
> 
        //->如果当前页面的URL是PC端项目的地址:需要跳转到移动端项目
        if (window.location.href.indexOf("www.zhufengpeixun.cn") >= 0) {
            window.location.href = "http://phone.zhufengpeixun.cn/";
        }
        return;
    }
> 
    //->反之则说明当前的页面是运行在PC端设备中的,如果访问的URL地址是移动端的,我们需要跳转到PC端地址上
    if (window.location.href.indexOf("phone.zhufengpeixun.cn") >= 0) {
        window.location.href = "http://www.zhufengpeixun.cn/";
    }
}();
> 
~function () {
    var reg1 = /AppleWebKit.*Mobile/i,
        reg2 = /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/;
    if (reg1.test(navigator.userAgent) || reg2.test(navigator.userAgent)) {
        if (/iPad/i.test(navigator.userAgent)) {
            //->说明是PAD
        } else {
            //->说明是手机
        }
    }
}();
>