CSS学习笔记:rem实现移动端适配的原理——媒体查询

移动端适配

移动端即手机端,也称M端

移动端适配:同一套移动端页面在不同屏幕尺寸的手机上可以实现宽度和高度的自适应,也就是页面中元素的宽度和高度可以根据屏幕尺寸的变化等比缩放

rem配合媒体查询可实现移动端适配

rem单位

媒体查询

媒体查询能够检测视口的宽度,然后编写差异化的CSS 样式

当某个条件成立, 执行对应的CSS样式

媒体特征

解释说明:max-width:200px; 代表视口宽度小于200px时样式生效

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

代码示例:

将设计稿的px单位转化为rem单位

查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)

例如设计稿中某个元素的宽度时68px,设计稿的参考设备宽度是375px,那么元素宽度转化为rem为:N = 68 / 37.5

rem单位的尺寸 = px单位数值 / 基准根字号

移动适配框架------flexible.js

在实际代码书写中,我们不可能真的用媒体查询去实现移动端适配,以上只是让大家了解rem实现移动端适配的原理,因为面试时,知道原理,你和面试官才有话聊

在实际代码书写中,我们会使用flexible.js来实现移动端适配。flexible.js是手淘开发出的一个用来适配移动端的js框架。核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

当然,这只是JS阶段的一个移动端适配的解决方案,到了Vue,还会有其他方案解决移动端适配

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试