移动web开发基础

了解移动端基础

• 浏览器现状

  • PC端常见浏览器: 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器
  • 移动端常见浏览器：UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器，以及其他杂牌浏览器
  • 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。

• 手机屏幕现状

  • 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px

• 常见移动端屏幕尺寸

  

  • 数据参考自: > material.io/devices/
  • 注：作为前端开发，不建议去纠结dp、dpi、pt、ppi等单位

• 移动端调试方法

  1. Chrome DevTools(谷歌浏览器)的模拟手机调试
  2. 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
  3. 使用外网服务器，直接IP或者域名访问

• 总结

  1. 移动端浏览器主要对webkit内核进行兼容
  2. 现在开发的移动端主要针对手机端开发
  3. 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
  4. 学会用谷歌浏览器模拟手机界面以及调试

视口 viewport

• 含义：浏览器显示页面内容的屏幕区域

  1. 布局视口 layout viewport
  • ios、Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多数都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

    

  1. 视觉视口 visual viewport
  • 含义：用户正在看到的网站的区域。
  • 可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

    

  1. 理想视口 ideal viewport
  • 需要手动添加<meta>视口标签通知浏览器操作
  • <meta>视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局视口就有多宽

• <meta>视口标签

  •   <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minmum-scale=1.0">
    

    

  • 标准的viewport参数设置

    1. 视口宽度和设备保持一致
    2. 视口的默认缩放比例1.0
    3. 不允许用户自行缩放
    4. 最大允许缩放比例1.0
    5. 最小允许缩放比例1.0

• 总结

  • 视口就是浏览器显示页面内容的屏幕区域
  • 视口分为：布局、视觉、理想视口
  • 想要理想视口，就给移动端页面添加<meta>视口标签

二倍图

• 物理像素&物理像素比

  • 含义

    • 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了的。
    • 在开发过程中，1px不一定等于1个物理像素的
    • PC端页面，1px等于1个物理像素，但是移动端就不尽相同
    • 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比

      

  • Retia(视网膜屏幕)是一种显示技术，可以将更多的物理像素点压缩至一块屏幕上，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

    

• 多倍图
  • 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
  • 通常使用二倍图，实际开发看公司需求
  • 背景图使用

      img {
        <!-- 原始图片：100*100 -->
        background-size: 50px 50px;
      }
    

  • 原始图片使用

      img {
        <!-- 原始图片：100*100 -->
        width: 50px;
        height: 50px;
      }
    

  • 多倍图切图

    • 后缀标识

      1. @3x 3倍图
      2. @2x 2倍图
      3. @1x 1倍图原图

      

移动端开发选择

• 移动端主流方案

  1. 单独制作移动端页面(主流)

     • 网址域名前面加m(nobile)可以打开移动端。如果是移动设备打开，则跳转移动端界面。
       

       例：m.taobao.com

  2. 响应式页面兼容移动端(其次)

     • PC和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配
       

       例：www.samsung.com/cn/

     • 缺点：制作麻烦，需要花费很大精力去调兼容性问题
  • 总结
    • 有两种方案
    • 主流：单独制作移动端页面

• 浏览器

  • 浏览器的私有前缀只需要考虑添加-webkit-即可。

    

• css初始化normalize.css

  • 移动端初始化推荐使用normalize.css
  • 优点
    1. Normalize.css 保护了有价值的默认值
    2. 修复了浏览器的bug
    3. 是模块化的
    4. 拥有详细的文档
  • 官网地址：> necolas.github.io/normalize.c…

• css3盒子模型box-sizing

  • 传统模式宽度计算：盒子的宽度 = css中设置的width+border+padding

  • css3盒子模型：盒子的宽度 = css中设置的宽度width里面包含了border和padding。也就是说：padding和border不会撑大盒子了

    

  • 那么选择传统 or css3盒子模型呢？

    • 移动端可以全部css3盒子模型
    • PC端如果需要兼容，就用传统模型；如果不考虑兼容，就选择css3盒模型

• 移动端常见布局方式

  1. 单独制作移动端页面（主流）
  • 流式布局（百分比布局）
  • flex弹性布局（强烈推荐）
  • less+rem+媒体查询布局
  1. 响应式页面兼容移动端（其次）
  • 媒体查询
  • bootstrap

疑问：可以这样理解吗？PC端是必须使用传统盒模型，而移动端需要看是否需要适配PC端，需要适配就传统，不需要就css3盒模型

流式布局：只能解决横向（宽度）的自适应，并不能解决高度的