rem适配布局

  • 开发
  • 27

rem适配布局

一.rem基础

在这里插入图片描述

二.媒体查询

1.概念

在这里插入图片描述

2.语法

在这里插入图片描述

（1）.mediatype查询类型

在这里插入图片描述

（2）.关键字

在这里插入图片描述

（3）.媒体特性

在这里插入图片描述

（4）.应用

在这里插入图片描述

3.媒体查询+rem实现元素动态大小变化

在这里插入图片描述
例子
在这里插入图片描述
在这里插入图片描述

4.引入资源（针对不同媒体查询用不同的css)

在这里插入图片描述
在这里插入图片描述
style640.css
在这里插入图片描述
style.320css
在这里插入图片描述

三.less基础

1.css弊端

在这里插入图片描述

2.less介绍（css扩展语言）

在这里插入图片描述

3.less的使用

（1）less变量

在这里插入图片描述
在这里插入图片描述

（2）less编译（编译后用link引入）

在这里插入图片描述
在这里插入图片描述

（3）less嵌套

子类

在这里插入图片描述
自身/伪类
在这里插入图片描述

在这里插入图片描述

（4）less运算（±*/）

在这里插入图片描述
在这里插入图片描述

四.rem适配方案

1.概念

在这里插入图片描述
在这里插入图片描述

2.方案

在这里插入图片描述

3.方案1

一般以750为准
在这里插入图片描述
在这里插入图片描述

4.方案1总结

在这里插入图片描述
在这里插入图片描述

阅读全部

相关推荐

  7. Vue中使px自动转rem配置 (h5适配问题)

    2024-04-10 19:08:04       63 阅读

  9. 前端中的响应式布局与各个端适配

    2024-04-10 19:08:04       62 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-10 19:08:04       94 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-10 19:08:04       100 阅读

  9. 在Django里面运行非项目文件

    2024-04-10 19:08:04       82 阅读

  19. Python语言-面向对象

    2024-04-10 19:08:04       91 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-04-10 19:08:04       85 阅读

热门阅读

  2. SQL注入攻击和防御

    2024-04-10 19:08:04       39 阅读

  6. 【考研复试上机】C++ ACM输入输出总结

    2024-04-10 19:08:04       30 阅读

  9. mysql 表连接 JOIN、LEFT JOIN、RIGHT JOIN

    2024-04-10 19:08:04       27 阅读

  20. PHP自带的密码加密函数Password_verify 和password_hash

    2024-04-10 19:08:04       32 阅读

  23. 第四百四十一回 再谈flutter_native_splash包

    2024-04-10 19:08:04       33 阅读

  25. IMP-00010: 不是有效的导出文件, 头部验证失败错误解决办法

    2024-04-10 19:08:04       34 阅读

  30. Python基础语法

    2024-04-10 19:08:04       34 阅读