移动端以及多端适配问题

移动端 1.移动端的适配方案 （1）为适配不同端口不同屏幕下的页面布局采用的不同代码编写思路：

[1]统一缩放（需要长宽比接近）
[2]采用rem和vm等相对布局，固定长度的采用px等
[3]固定的尺寸加d性布局（要求的是元素不要固定长度超过范围量）

（2）viewport适配

通过宽度等比例缩小，使用meta标签元，对viewport属性的content设立width以及initial－scale屏幕与设计稿宽比的适配。
但是需要动态化的设置initial的比值。通过初始化的js动态 *** 作dom的meta标签，通过document的以及screen和window的环境变量进行不同的初始化。

（3）（vw,vh适配）部分的等比缩放

[1]var（–name）的css变量形式调用
[2]利用calc实现动态计算大小
[3]vw,vh是基于screen的宽高计算的

（4）rem适配

[1]相对于根节点的font-size进行的计算（根据环境动态font-size使用）达到不同端口不同效果的原理，可以利用媒体查询，也可以使用js对属性进行 *** 作,或者sass库的处理形式。

（5）合理布局

[1]通过d性盒的换行补充等纯css方法进行布局，可以使得页面自适应一些布局情况

---

代码实现布局

---

2.APP开发技术栈详解（后续所学）

原生 App 技术栈 （native technology stack）、混合 App 技术栈 （hybrid technology stack）、跨平台 App 技术栈 （cross-platform technology stack）

解析：

（1）原生App技术栈（native technology stack）:利用运营商提供的一些原生SDK进行开发，不能跨平台使用。

（2）混合的App技术栈：混合技术栈其实是 Web 技术栈 + 容器技术栈，这个技术栈就主要学习容器提供的 API Bridge，网页通过它们去调用底层硬件的 API。

（3）跨平台App技术栈：跨平台技术栈指的是使用一种技术，同时支持多个手机平台。它与混合技术栈的区别是，不使用 Web 技术，即它的页面不是 HTML5 页面，而是使用自己的语法写的 UI 层，然后编译成各平台的原生 App。（仿照规范书写//flutter weex等）

Webview（看引擎机制就行）

通常情况下，App 内部会使用 WebView 控件作为网页引擎。这是系统自带的控件，专门用来显示网页。应用程序的界面，只要放上 WebView，就好像内嵌了浏览器窗口，可以显示网页。

留给之后详解（*）

---

跨平台详解

跨平台技术栈的框架，都是使用自己的语法编写页面，不使用 Web 技术，编译的时候再将其转为原生控件，或者使用自己的底层控件，生成原生 App。这样就完全解决了 Web 页面性能不佳的问题。

详细的一些开发框架有：

React Native: 使用 JavaScipt 语言编写页面Xamarin：使用 C# 语言编写页面Flutter：使用 Dart 语言编写页面

1.React Native（需要详细笔记学习）此处介绍使用

面临着一些问题：通过语义语法解析转化成原生控件，但是复杂页面，样式或 功能存在差异。

2.Flutter解决方案

它自己实现了一套控件。打包的时候，会把这套控件打包进每一个 App，因此不存在调用原生控件的问题。不管什么平台，都调用内嵌的自己那套控件，就能做到 iOS 和安卓体验完全一致。（提供的API确定了）

它是 Flutter 的官方语言，接近 JavaScript 语法，但是多了静态类型支持。

3.总结引入

跨平台开发的目的

线上动态性，不需要频繁更新版本即可实现新业务的上线；增加代码复用，减少开发者对多个平台差异适配的工作量，解决多端不一致的问题；提高业务专注的同时，提供比web更好的体验；降低开发成本.

跨平台开发流派

Web 流：也被称为 Hybrid 技术，它基于 Web 相关技术来实现界面及功能
Cordova，AppCan，小程序，快应用代码转换流：将某个语言转成 Objective-C、Java 或 C#，然后使用不同平台下的官方工具来开发
java2OC，OC2Java，java2C#编译流：将某个语言编译为二进制文件，生成动态库或打包成 apk/ipa/xap 文件
Xamarin虚拟机流：通过将某个语言的虚拟机移植到不同平台上来运行
Flutter，Titanium，React Native，Weex

跨平台开发主流技术

Flutter（Google）ReactNative（FaceBook）Weex（Alibaba）Hybrid AppCordova（原PhoneGap，Adobe）（）小程序，快应用

响应式开发

网站要能兼容PC端和移动端显示-移动端等端口适配

重点总结：

1.浏览器提供的对象环境变量和属性十分重要，要知道它的渲染机制才能更好的适配。

---

注：*为重要且未解析的