10 - rem 布局

一、响应式布局

让 H5 页面适配不同设备

项目类型：

1. PC 端产品（一般用于大型项目，大型项目都是 PC 和移动端各一套产品）

一般不需要做响应式开发，都是固定宽高的布局（100%)还原设计稿
有时候全屏的项目，需要我们把最外层容器的宽度设置为百分百布局

2. 移动端产品（不需要 PC 访问处理）

webApp：把开发的 H5 页面放到手机端浏览器，微信、自己公司中APP运行“Hybrid 混合 APP 开发”
小程序：微信小程序
APP：IOS、Android、前端（pn、flutter、uni-app、ionic、phoneGap、cordova）
需要做响应式布局开发，但只需要适配移动端设备既可。
手机尺寸（宽：px）320、375、414

3. PC 端和移动端用同一套项目

需要响应式布局开发，这种产品一般都是简单的企业展示
如：Mobike

二、手机 APP 发展史

1. Native app

使用的技术栈
IOS ：object - c / swift
Android ：java - native

特点：

1. 当时的技术与前端没关系，它们是直接运行在操作系统中。能够直接操作设备中的软件和硬件。而且性能很好，内容也都是 IOS 和 Android 开发出来的
2. 不能跨平台，内容不能及时更新或者让用户及时的看到

2. webApp

使用的技术栈
H5页面：H5 + CSS3 + JavaScript

特点：

1. H5 运行在手机的浏览器中，而不是操作系统中（操作手机软硬件功能需要浏览器的支持），而且性能不好
2. 跨平台开发（手机端的浏览器一般都是 webkit 内核的）
3. 强制自动更新的

3. Hybrid 混合 App 开发

使用的技术栈
把 webApp 嵌入到 Native App 的 webview 中
webview：嵌入 H5 页面

特点：

1. 把操作软硬件和一些需要高体验或者支付分享等功能交给 Native App开发
2. webview 就是不叫浏览器的浏览器，它也是基于 webkit 内核渲染页面的，前段开发者把网址给 APP 开发者，他们会把其嵌入到 webview 中。

4. H5 和 APP 的通信

1. JSBridge

原理：向 webview 中注入所有需要 H5 后期调取 APP 的方法（类似于 window 的全局对象）
如：自拍照片：首先发送给 App ， App 接收到请求会调取摄像头进行拍照，拍照后会把保存在相册中的图片地址给 H5 返回

1. 伪协议传输：只用于 IOS 因为安卓是开源系统，不安全
2. react / flutter / uni-app… 基于 js 编写功能后，最后生成 NativeApp的代码（前端最好也会 uni-app）

5. 响应式开发布局基础

1. 拿到设计稿后（现在设计稿一般是 750px 的），我们设定一个初始的 rem 和 px 换算比例（一般设置为 1rem = 100px 为了方便后期换算）
2. 测量出设计稿中元素的尺寸（ps 测出来的是 px 单位），在编写样式的时候全部转换为 rem 的单位（除以一百既可）100% 还原设计稿
3. 编写一段 js ，获取当前设备的宽度，让其除以设计稿的宽度750，再乘以初始的换算比例100，计算出当前设备下，1rem 应该等于多少像素（只要改变 HTML 的 font-size 就可以）；这样 HTML 字体大小一改，之前所有以 rem 为单位的元素都会跟着缩放……

px 就是像素，屏幕分辨率来决定的
DPI 适配：屏幕像素密度比

6. rem 响应式布局开发

现在真实项目中，主体响应式布局以 rem 为主，部分效果实现可基于 flex 来做，需要样式微调还是要基于 @media 来完成的…

我们把 HTML5 页面放到手机上预览，默认情况下，不管手机设备有多宽，HTML 都是按照980（或者1024）宽度渲染的。这样页面会整体缩小，内容也会缩小

解决：viewport 视口（layout viewport 布局视口），设定页面渲染中的一些规则，width = device-width：让当前页面渲染的宽度和设备宽度保持一致

width=device-width：让当前页面渲染的宽度和设备宽度保持一致
initial-scale=1.0：初始缩放比例1:1
maximum-scale=1.0：最大缩放比例1:1
minimum-scale=1.0：最小缩放比例1:1
user-scalable=no: 禁止用户手动缩放

// 为了防止前面的代码没写分号，所以函数前写分号
;(function (designWidth) {
    function computeFont () {
        // 获取视口的宽度
        let winW = document.documentElement.clientWidth;
        if (winW >= 750) {
            // 如果视口的宽度超过 750 就把页面的 HTML 的 fontSize 设为 100px
            return document.documentElement.style.fontSize = '100px';
        }

        document.documentElement.style.fontSize = winW / designWidth * 100 + 'px'
    }

    // 需要执行方法才会有作用
    computeFont();
    // resize 重新计算属性，视口大小发生变化时，重新计算
    window.addEventListener('resize', computeFont)
    // 屏幕朝向发生变化时，重新计算 HTML 的 fontSize
    window.addEventListener('orientationchange',computeFont)

} (750));

7. 媒体查询

CSS中设定条件就是基于 @meida 完成的
媒体设备 all / print / screen…
媒体条件：否和某个条件写对应的样式
max-width
min-width
width
……

<style>
    .person {
        display: block;
        margin: 0 auto;
        width: 400px;
    }

    /* 如果当前页面宽度<=500 */
    @media screen and (max-width: 500px) {
        .person {
        width: 200px;
        }
    }
</style>

二、CSS3 选择器、兼容情况

1、基本选择器

2、层次选择器

3、动态伪类选择器

4、目标伪类选择器

5、UI元素状态伪类选择器

6、结构伪类选择器

7、否定伪类选择器

8、属性选择器