移动web-移动适配rem

最新推荐文章于 2024-07-25 11:52:08 发布

Q _Q

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量45

点赞数

分类专栏：移动web 文章标签： html css css3 前端

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131368032

版权

移动web 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

移动适配
rem ：目前多数企业在用的解决方案
vw / vh：未来的解决方案（目前大厂在用 bilibili）

1 长度单位
rem（相对长度单位,相对于根元素<html>的font-size。可以通过改变根元素的字体大小来改变rem的尺寸）
vh（相对视窗的高度。1vh = 视窗高度的1%。会随着屏幕大小的变化而变化。）

        vw（相对视窗的宽度。1vw = 视窗宽度的1%。会随着屏幕大小的变化而变化。）

目标：能够使用rem单位设置网页元素的尺寸
网页效果
屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位或百分比布局可以实现吗？
px单位是绝对单位
百分比布局特点宽度自适应，高度固定
适配方案
rem（重点）
vw / vh

rem单位
相对单位
Ø rem单位是相对于HTML标签的字号计算结果
Ø 1rem = 1HTML字号大小
rem-媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

rem适配原理
1. 根据视口宽度，设置不同的HTML标签字号
2. 书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字号


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

2 less （Less语法快速编译生成CSS代码）
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：
浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
Easy Less（vscode插件） : 作用：less文件保存自动生成css文件

less 语法
注意：
1 当语法出现重大错误时，less文件保存后不会自动转为css文件
2 表达式存在多个单位时以第一个单位为准

1 注释
单行注释 // 不会出现在css文件
块注释 /* */ 会出现在css文件

2 计算：+ - * ./()
注意点：计算符的前后必须用空格隔开或者不用空格
除法时用()包裹表达式或者用./
单位可以写在前或者其他位置，如果一个表达式单位过多，会以第一个单位为准

3 嵌套（看嵌套.less）

4 变量名
@变量名：值
作用：用于存放主题颜色或者统一字号等，便于代码维护

5 导入文件
@important "文件路径"

6 导出文件
// out: ../文件名
// out: ../文件夹名/文件名

7 禁止导出
// out: fasle

8 压缩导出
// compress:true