HTML+CSS：rem、vw / vh移动适配、媒体查询

一、长度单位

• rem ：目前多数企业在用的解决方案
• vw/vh：未来的解决方案

二、rem单位

• 相对单位
• rem单位是相对于HTML标签的字号计算结果
• 1rem = 1HTML字号大小
  

2.1 rem使用媒体查询

手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
使用媒体查询

• 媒体查询能够检测视口的宽度，然后编写差异化的CSS 样式
• 当某个条件成立, 执行对应的CSS样式

2.2 rem移动适配方案

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

rem单位的尺寸=px单位数值/基准根字号
如68px的单位，在375width的页面中，rem单位为：68/37.5

思考：咱们检测了3个视口，分别设置了根字号，有什么弊端吗？
答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个
解决方案 flexible.js

2.3 使用flexible.js

使用flexiblejs配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
已自动适配媒体查询

• flexible.js是手淘开发出的一个用来适配移动端的js框架
• 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
  

2.4 使用less 计算rem

三、vw / vh

相对视口的尺寸计算结果

• vw：viewport width
  1vw=1/100视口宽度
• vh：viewport height
  1vh=1/100视口高度

3.1 vw单位尺寸

vw单位的尺寸=px单位数值/(1/100视口宽度)

视口iphone678 375 * 667
适配 68px * 29px 的盒子使用vw

3.2 vh单位尺寸

vh单位的尺寸=px单位数值/(1/100视口高度)

视口iphone678 375 * 667
适配 68px * 29px的盒子使用vh

3.3 100%视口适配

3.3 使用Less

四、媒体查询

媒体查询（Media Query）是CSS3中的一个模块，它允许我们根据设备的不同特征（如屏幕大小、分辨率、方向、颜色等）来应用不同的样式。
通过使用媒体查询，我们可以为不同设备或屏幕尺寸设计出针对性的样式，实现响应式布局。

媒体查询语法通常包括一个媒体类型和一个或多个限制条件。例如：

@media screen and (max-width: 768px) {
  /* 在屏幕宽度小于等于768像素时应用这里定义的样式 */
}
1
2
3

这段代码表示当屏幕宽度小于等于768像素时应用其中定义的样式。在上述例子中，screen指定了该媒体查询只适用于屏幕设备，而(max-width: 768px)则是限制条件，指定了最大宽度为768像素。

• 媒体特性常用写法
  max-width
  min-width
  
• 完整写法
  
  

根据设备宽度的变化，设置差异化样式

如果检测到视口宽度小于768px, 认为是手机端, left隐藏

link外链式CSS引入