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,还会有其他方案解决移动端适配

相关推荐
像是套了虚弱散2 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
颜颜yan_2 小时前
UU远程——让工作、学习、娱乐跨设备无缝衔接,“远程”更像“身边”
学习·娱乐·远程工作
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇3 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
新子y3 小时前
【小白笔记】区分类方法/实例方法和静态函数/命名空间函数
笔记·分类
哆啦A梦15884 小时前
点击Top切换数据
前端·javascript·vue.js
梁辰兴4 小时前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
degen_4 小时前
第一次进入 PEICORE 流程
c语言·笔记
YJlio4 小时前
Process Monitor 学习笔记(5.24):工具栏参考与高效快捷键指南
笔记·学习·php
deng-c-f4 小时前
Linux C/C++ 学习日记(30):协程(一):同步和异步、协程的简要介绍、用户态CPU调度的实现
学习·协程·同步/异步