CSS3--移动端自适应

偏执的太偏执、 2024-04-18 23:15 7阅读 0赞

# CSS单位 #

#### CSS中，单位分为两类： ####

1.  **绝对单位**：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的；
2.  **相对单位**：没有固定的度量值，是由其他元素尺寸来决定的相对值。

> CSS绝对单位：（绝对单位通常使用在打印方面）  
> ![这里是引用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]  
> CSS相对单位  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

#### CSS单位浏览器兼容性 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

#### CSS重要单位集合： ####

1.  px像素Pixel，绝对长度单位，相对于显示器屏幕分辨率而言的。
2.  em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

> **em简介**：em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸16px。  
> **em特点**：① em的值并不是固定的②em会继承父级元素的字体大小  
> **em默认计算方式**：浏览器的默认字体大小都是16px，所以1em=16px，那么10px=0.625em  
> **em继承性**：**em是一个相对的单位，是当前元素相对于当前对象字体的大小而言的；**（例如：父元素设置font-size: 32px ，子元素设置font-size: 1em ，那么子元素的字体大小也是32px。如果父元素没有设置字体大小的话，就是想对于浏览器默认的字体大小而言的）**如果父元素没有设置字体大小，则相对于浏览器默认字体大小而言的**

1.  rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
2.  ==%==一般宽泛的讲是相对于父元素

> **%一般宽泛的讲是相对于父元素**，但是并不是十分准确，分为以下几种情况：  
> ①对于普通定位元素就是我们理解的父元素  
> ②对于position: absolute;的元素是相对于已定位的祖先级元素  
> ③对于position: fixed;的元素是相对于ViewPort（可视窗口)

*  vw与vh视窗单位，vmax与vmin可以判断屏幕横竖屏
 *  （了解即可） ex 和ch 单位，依赖于当前字体font-family 和字体大小 font-size。

> ex 指当前字体环境中小写字母x 的高度；  
> ch 指当前字体环境中数字 0 的宽度。  
> ![这里是引用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]

> 普及知识点：  
> 浏览器的默认字体大小：16px  
> chrome字体最小限制：12px  
> CSS单位分为绝对单位和相对单位

# rem简介 #

#### 什么是rem ####

*  rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
 *  看到rem会想起em单位，em（font size of the element）是指相对于当前对象内字体大小的单位。它们之间其实很相似，只不过rem宽高计算是依赖根元素字体大小，em是依赖当前对象或祖先的字体大小计算。

#### rem宽高转换 ####

rem计算验证：  
所谓依赖根元素来计算的方式，就是根据根元素html的font-size字体大小计算，然后所有的rem就根据这个font-size来计算。

*  因为浏览器默认字体大小为16px，则1rem=16px。如果想设置一个元素的宽高为100px，计算起来较为麻烦，所以一般做法为html \{font-size: 62.5%;\}
 *  即将根元素字体大小缩为默认大小的62.5%，此时1rem=16px\*62.5%=10px，也方便使用计算，如下所示

.demo{
    			width: 1rem;
    			height: 1rem;
    			background: red;
    		}

![在这里插入图片描述][20190913204136287.png]

> 问题：  
> ·验证后发现chrome字体限制BUG，因为chrome限制最小字体为12px，所以此时无法将根元素字体大小的16px的62.5%缩为10px。  
> ·即chrome下最小字体为12px，所以假如你设置html\{font-size:62.5%\} header\{height:8rem\} 那么在其他浏览器下 header的高度是80px，但是在chrome下是96px。  
> 方案：  
> 设置：html\{font-size:625%\} 这样子既便于计算，又不会产生这个问题.

此时再使用rem的话1rem=100px，如果想设置header元素高度为80px，则可以这样设置header\{height:0.8rem;\}

html{
    			font-size: 625%;
    		}
    		header{
    			width: 100%;
    			height: 0.6rem;
    			background: red;
    		}

![在这里插入图片描述][20190913204852718.png]

#### rem字体转换 ####

如果将html\{font-size:625%;\}后，宽高计算都没有问题，但字体会顶飞，变得特别大…

html{
    			font-size: 625%;
    		}
    		header{
    			width: 100%;
    			height: 0.6rem;
    			background: red;
    		}

![在这里插入图片描述][20190913212353486.png]  
rem字体过大解决方案：  
重新定义body字体大小为font-size:0.16rem即可

html{
    			font-size: 625%;
    		}
    		body{
    			font-size: 0.16rem;
    		}
    		header{
    			width: 100%;
    			height: 0.6rem;
    			background: red;
    		}

![在这里插入图片描述][20190913212717221.png]  
验证后发现重定义body字体大小即可解决，且对其他标签默认字体大小及样式均无影响

> rem面试常问：  
> 设了html\{font-size:62.5%\}后就有1rem = 10px，为什么不直接设置html\{font-size:10px\}，如果设置10px，则1px也是=10px？  
> 答案：  
> 主要是兼容性和未来发展趋势的综合考虑，《响应式web设计实践》中提到过这一点，桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的，但是其他类型的设备的默认字体大小不一定是16px，特别是高分辨率的设备，16px大小的字体在他们上面看起来会非常小。所以不能在body上设置具体像素，设置成百分比，可以**按照设备的基准字体大小给小编写的网页设置好最适合用户浏览的字体大小。**

# @media实现rem转换 #

怎么样在不同分辨率的情况下计算根元素需要的font-size的值，实现比例缩放，统一展示效果？  
关于这个点，其实有两种解决方案，一种是基于CSS的情况，另外一种就要通过js计算获得。

#### 怎么利用css做到基于不同的分辨率来定义呢？ ####

首先想到的就是媒体查询。当基于媒体查询来做屏幕自适应时，首先要考虑下做哪些屏幕，做一下简单的列举，常见的屏幕分辨率的媒体查询：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]  
除了以上列举几个，还有其他机型需要进行适配，所以由此可以看出利用CSS实现基于不同的分辨率来定义不同根元素字体大小，从而实现不同的rem大小有些麻烦。所以这种方法有一个弊端，需要**计算每一个屏的基础值**  
所以开发中大多使用JS代码计算来根据屏幕宽度实现rem大小比例转换。

# js实现rem转换 #

JS动态设置根元素字体大小  
（1）获取根元素字体大小  
document.documentElement.style.fontSize  
（2）获取屏幕可视区域窗口宽度  
document.documentElement.clientWidth  
计算语法：  
document.documentElement.style.fontSize  
=  
document.documentElement.clientWidth / 750\*100 + ‘px’;  
通过以上计算公式便可以实现在750px大小的设备中，1rem=50px  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 6]  
**根元素字体大小font-size=(375/750)*100+‘px’=50px***  
接下来改动机型再次测试，例如改为小一号的iPhone5，此时会发现宽高变为42.66，实现了根元素字体大小font-size跟随机型缩放效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 7]  
接下来做下处理，一般在页面加载时自动执行js代码进行根元素字体大小计算 ，对js代码进一步修改如下  
![在这里插入图片描述][2019091321431017.png]  
其他修改  
另外，当控制台调试机型改动时（即resize窗口大小调整）、手机旋转页面时（即orientationchange用户水平或者垂直翻转设备，即方向发生变化）等…都需要重新计算  
针对以上各种问题及情况，勤劳的程序猿们写了一个开源的解决方案flexible。

**简介及原理：  
flexible.js是一个开源的用于终端设备的 适配解决方案，主要用于解决各种不同尺寸移动设备的大小自适应问题，其原理是通过移动设备的dpr（设备像素比=物理像素/设备独立像素）和屏幕宽度来动态改变html的font-size大小。**  
**rem自适应js文件flexible.js：  
通俗理解：  
就是通过动态获取屏幕宽度控制根元素字体大小,进而控制页面大小比例。flexible.js 的作用就是让你在不同的终端设备之间如鱼得水,就是一个终端设备适配的解决方案。也就是说它可以让你在不同的终端设备中实现页面适配。  
用法：  
在页面的中引入 flexible.js文件**

> flexible.js  
> 假如一个元素的宽是160px,在平时，我们可以采用百分比可以做到自适应，假如使用响应式的话，可能需要设置多个，比如在320px，输出80px，而在640px输出160px等。而采用以上rem的方法，则只需要输出2.5rem就能实现统一，如下表格：  
> ![在这里插入图片描述][20190913214747944.png]

#### rem布局小技巧： ####

*  页面中模块间距离一般为0.2rem
 *  文章字体的大小一般分为级个档次 0.2rem 0.24rem 0.28rem 0.32rem，其他字体可以根据设计图自己测量，然后进行计算
 *  一般开发移动端都会在最外部写个div，限制页面效果图的宽度。

拿项目举例，例如移动端页面效果图的宽度都定在了640px。于是在项目中，最外层的div样式就设置成了，所有的内容都放到了container里。  
![在这里插入图片描述][20190913214632671.png]  
![在这里插入图片描述][2019091321463740.png]

PS：移动端开发：

1.  vw和vh布局–字体大小测量计算即可。
2.  rem布局：引入flexible.js自适应文件。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3c3d15eff4124ee890827a612e6a2f54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fad2d19ada464b3ba71bd9c5cb31165b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b1eeb72981274de18e99a5861a025d87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fd214d47d96c44e9805aa19083137e94.png
[20190913204136287.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4764d31445d040ada08f39b781968330.png
[20190913204852718.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d78f65955afa47b7a4f6ff0aebe2f513.png
[20190913212353486.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/554d9708c01e445dae1680e60c0e0a8f.png
[20190913212717221.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9f820cb588c74124a4129f144a94b8bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/42c9fab67d554995b6c5a4c2e6276f17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/beafc1788c4e426d8d8f67974f8dc060.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/147caa40870a47fda86087aca87a2e11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5f0446d003de48de93ee590cecfdbdaf.png
[2019091321431017.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/99c46a5363594b48a08c3ecdc2c627f3.png
[20190913214747944.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/24484e5efc44426fa26c71cac60182f7.png
[20190913214632671.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/521984d9d1944409ad3db9ff1d531607.png
[2019091321463740.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/931aaa924af3463389eb9a81e958931a.png