[toc] ## 什么是响应式布局开发 让我们开发完成的产品，能够适配不同的设备屏幕：PC端(电脑)、PAD、PHONE(手机端) ## 当别人和你聊H5，他们想要聊的是什么？ 现在H5已经成为移动端开发(响应式布局)标准代名词 ## 移动端发展史 ### native：native-app 智能生活(互联网+) 离不开各种APP(应用)，这些应用离不开一代又一代的IT工程师 很久以前，APP开发和H5没什么太大关系，都是由专业的APP开发团队开发的 一般分为： - 安卓系统：JAVA(java-native) - IOS系统：C(object-c/swift) 我们把用上述语言开发的APP称之为native app(原生APP) 这种开发方式的步骤一般为 >1. 本地开发，打包成安装包，上传到应用商店(App Store 是有审核期的，7天左右) >2. 用户从应用商店下载安装相关的APP，把当前APP源文件(源代码)安装在手机上，类似于在PC电脑上安装一个软件 > 好处在于： > native app可以直接操作手机内部的软件或则硬件，(例如：通讯录、摄像头、相册、重力感应器等)，因为它是直接运行在手机操作系统中的程序，因此进行操作和交互时，性能是比较不错的(相对于H5，因为H5还要在它内部运行而不是直接在操作系统中) 这种开发方式的问题是： >手机操作系统不一样，使用的技术也不一样，所以需要两个不同的开发团队，开发不同版本的APP > >；除了开发成本，这样还有个问题就是有的版本升级快，有的版本升级慢（审核问题），并且用户可能不想更新，这样新内容就无法推广 > --- ### h5：web-app >h5程序运行示例图  >由H5开发web-app的特点： >1. 其实就是个HTML页面，需要基于浏览器运行(PC或则移动端浏览器再或则V8内核的工具也可以)，如果想要操作手机内部的软件或则硬件，需要浏览器支持 >2. 相比于native-app来说，性能不好 >3. 所有的请求访问都必须基于连网的状态(除了有些是natvie-app把h5特殊处理了) 优势： >H5只需要把服务器上的文件更新，用户每次访问看到的都是最新版本 劣势： >H5页面部署到了自己的服务器上，源文件都在服务器上，用户想要看页面，必须从服务器上重新的拉取代码才可以 >虽然h5中支持manifest离线缓存，但现在并不成熟不大好用(什么时候更新什么时候不更新、稳定性、服务器支持、存储大小) >而native-app不需要联网，是因为所有代码文件都在手机上，一些需要联网访问的，native-app都可以做离线缓存(缓存视频撒的) --- ### Hybrid So，介于上面两种开发方式优缺点， 目前我们开发一款APP通常为 **Natvie+H5的介入** 的方式： 在native-app中嵌入H5页面(web-app)，我们把这种模式称之为Hybrid，即混合APP开发 >Hybrid程序运行示例图  微信这个 **native-app** 的 **js-bridge** 就长这样  ### 典型应用 >微信是最为经典的Hybrid混合开发模式，它支持我们的H5页面在微信这个 **native-app** 中运行，而且还可以调取微信提供的一些方法实现相关的操作(例如：微信的二次分享) > >微信现在的H5不是泡在web-view中而是qq浏览器中 > #### 常见项目类型 >1. PC端和移动端公用一套项目(同一个地址)，我们也要保持良好的展示性，例如：猎豹浏览器、华为官网等简单的展示网站 > >2. PC端和移动端用的是不同的项目，例如：京东、淘宝等...【比第一种更常见】 >PC端固定布局即可 >移动端需要考虑响应式开发 >1)放在浏览器中运行 >2)放在第三方平台中运行(微信) >3)放在自己公司的 **native-app** 中运行 >需要对运行环境进行判断，因为在不同地方运行api接口的样子可能不一样 > ## 开发 ### 手机常用尺寸 >[苹果] >iphone 5s 及以前：320px >iphone4：320\*480 >iphone5：320\*568 > >iphone6：375px >iphone6plus：414px > > >[安卓] >320、360、480、540、640 ... > 在做H5页面开发之前，需要先从设计师手里索要UI设计图(PSD格式的或则sketch设计稿) 如果是pc和移动端公用： 1360 1200 1100 1000 都有 如果是pc和移动端分开： 常用尺寸有 iphone4 -> 640\*960 iphone5 -> 640\*1136 iphone6 -> 750\*1334 ### 设备像素密度比DPI **主要是对图片影响比较大** 之所以有影响，是因为高清屏，原本1x1的 非得按照2x2来呈现，这样就可能会导致出现失真  为什么设计师给我们的设计稿为什么比真实尺寸要放大二倍？ 因为图片在高倍屏下，会被放大，比如二倍屏幕中，本来是100x100的图片会被放大为200x200，这就可能会失真 So，我们一般就直接给一个200x200的图片(在普通屏，1倍屏中当做100x100用（写css时）) ### viewport 移动端和pc端不一样 pc端， 当前浏览器有多宽，html页面就有多宽 而手机浏览器是无法调整大小的，html页面宽度不是根据它也不是根据手机设备的宽度，而是一个固定的宽度**980**，这样当我们在一个320的手机上观看HTML页面，为了保证把页面呈现全，就需要让HTML页面大概缩小三倍，这样虽然看全了，但所有内容都变小了，用户想要看清楚，还需要手动把想看的部分放大  所以为了让 html 页面 在手机端中和手机视口宽度一样，需要： ``` //和手机视口一样大，不能缩放也不能放大 <meta name="viewport" content="width=device-width,user-scable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"></meta> ```  加了以后  ### REM 和**px**像素一样，它是一个CSS样式单位 它是相对于页面根元素[HTML]字体大小设定的单位  然后在 body 中将字体大小重置为默认大小 ``` body{font-size:.16rem} ``` #### 在项目中如何利用REM进行响应式开发 >1. 严格按照设计稿中的提供的尺寸进行样式编写(不管是宽高，还是MARGIN，还是字体等)，例如：设计稿是750\*1336的，设计稿中有一个300\*150的图片，我们布局的时候依然按照300\*150布局 > >2. 我们在编写样式的时候，不要使用**px**单位，所有的单位都统一换算为**REM**(此时我们需要让HTML的FONT-SIZE=100px) > >3. 上述完成后，在750的手机上是没有任何问题的，但是在375的手机上肯定存在问题了(页面太大了)，此时我们需要让页面中的所有样式，都整体缩小，才能达到响应式适配的目的 >此时只需要把HTML的字体大小修改，那么之前所有以REM为单位的样式会自动跟着重新计算 >750设计稿：1REM=100px >375的手机：375/750*\100 就是最新HTML的字体大小，也是最新REM和PX的换算比例 >当前设备的宽度/设计稿宽度\*100 = 当前手机下REM和PX的换算比例，也就是HTML的字体大小