移动端响应式开发

  1. 什么是响应式布局开发?

    把我们开发完成的产品,能够让其适配不同的设备屏幕:PC、PAD、PHONE

  2. 现在H5已经成为移动端开发(响应式布局)的标准代名词

  3. 移动端发展史

    智能生活(互联网+)离不开各种APP(应用),这些应用离不开一代又一代的IT工程师

    很久以前,APP开发和H5没什么太大的关系,都是由专业的APP开发团队开发的

    安卓系统:JAVA(JAVA-NATIVE)

    IOS系统:C(object-c/swift)

    我们把使用上述语言开发的APP称之为native-app(原生APP)

    1. 本地开发,打包成安装包,上传至应用商店(APP Store是有审核期的【七天】),用户从应用商店下载安装相关的APP;把当前APP的源文件(源代码安装在手机上,类似于在电脑上安装软件)
    2. native-app可以操作手机内部的软件或硬件(例如:通讯录、摄像头、相册、重力感应器等),因为它是直接运行在手机操作系统中的程序
    3. 最一些操作和交互,性能是比较不错的
    4. 手机操作系统不一样,使用的技术也不一样,所以需要两个不同的开发团队,开发不同版本的app(问题:有的版本升级快,有的版本升级慢)
  4. 目前我们开发一款APP需要H5的介入:在native-app中嵌入H5页面(web-app)这种模式称之为Hybrid混合app开发

    • 由H5开发的web-app的特点
      • 其实就是HTML页面,需要基于浏览器运行(PC或者移动端浏览器在或者V8内核的工具也可以)
      • H5能否操作手机内部的软件或者硬件,取决于浏览器是否支持,如果浏览器支持,H5页面可以调取使用,反之不可以。例如:H5中想要调取摄像头,UC浏览器支持的话,是先把调取摄像头的功能实现了,然后放在window全局对象中,供H5中的JS调取使用
      • 相比于native来说,性能不好
      • 所有的请求访问都必须基于联网状态(除了有些nativea-app把H5特殊处理了),虽然H5中支持manifest离线缓存,但是这个技术不是很好
      • 更新比较及时:H5只需要把服务器上的文件更新,用户每次访问看到的都是最新版本,这个比nativea-app好
  5. Hybrid-app:

    • web-view:一款基于V8引擎渲染HTML页面的工具(类似于浏览器)
    • H5页面就是嵌入到web-view中,由其渲染
    • 真实项目中
      • 将H5响应式页面开发完成后部署到服务器上(有一个http/https的访问地址)
      • 此时用户可以手动输入网址访问
      • 我们也可以生成二维码,让用户扫描访问
    • 整个产品的外层框架交给native-app团队开发,他们把壳搭起来,把需要调取手机内部软件或者硬件的功能实现,把一些缓存页面的机制实现…,提供好对应调取的方法
    • 前端把开发生成好的H5地址告诉给native-app,他们会在自己的web-view中通过提供的地址渲染出对应的页面
    • 一个产品:主题内容或者经常更新的内容,都是H5来开发,native-app只开发外壳和调取手机内部的功能
    • H5中如果需要使用手机内部功能,只需要调取自己宿主环境web-view中提供的方法即可
  6. 微信是最为经典的Hybrid混合开发模式,它支持我们在H5页面在微信这个native-app中运行,而且还可以调取微信提供的一些方法实现相关的操作(例如:微信的二次分享)

常见的项目类型

  1. PC端和移动端公用一套项目(用一个网址),我们也要保持良好的展示性,例如,猎豹浏览器、华为官网等简单的展示网站
  2. PC端和移动端用的是不同的项目,例如:京东、淘宝
    • PC端布局固定
    • 移动端需要考虑响应式开发
      • 放在浏览器中运行
      • 放在第三方平台运行
      • 放在自己公司的native-app中运行

手机常用尺寸:

【苹果】:

  • iphone5s及以前:320px
  • iphone4:320*480
  • iphone5:320*568
  • iphone6:375*667
  • iphone6/7/8/plus:414*736

【安卓】

  • 320、360、480、540、640

做H5页面开发之前,需要先从设计师获取ui设计图(PSD格式或者sketch设计稿)

设备像素密度比

响应式布局

只要当前页面需要在移动端访问,一定要加下面这段meta标签,不加的话,我们html页面的宽度都是980px(如果在320px的手机上打开HTML页面,为了保证把页面看全,需要把html缩小大概3倍左右,所有内容都变下了),为了不让页面缩放,我们需要保证手机的宽度和HTML的宽度一直

1
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  1. REM响应式布局

    • 和px一样,他是一个css样式单位
    • px是一个固定单位,rem是一个相对单位(相对页面的跟元素(HTML)字体大小来设定的单位)
    • 设置为100px,是为了方便后期换算成rem
    1
    2
    3
    html {
    font-size: 100px;
    }
    • 真实项目中如何利用rem的这个特性来实现相应是布局?

      1. 严格按照设计稿中的尺寸进行样式编写(不管是宽高,还是margin,还是字体等),例如:设计稿是750x1336的,设计稿中有一个 300x150的图片,我们的布局的时候依然按照300x150布局…
    1. 我们在编写样式的时候,不要使用px单位,所有的单位都统一换算为rem(此时我们需要让html的font-size:100px

      1. 上述完成后再750px的手机上是没有任何问题的,但是在375px的手机上肯定存在问题了,此时我们需要让页面中的所有样式都整体缩小才能达到响应式适配的目的(此时只需要把HTML的字体大小修改,那么值钱所有以rem为单位的样式会自动重新计算

      rem等比缩放响应式布局:如果单独做移动端项目(项目只在移动端访问,pc端有单独的项目),我们选择响应式适配的最佳方案就是rem布局(当然细节处理可能会用到flex或者@media)

  2. 媒体查询响应式布局