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

相关推荐
DKPT2 分钟前
Java享元模式实现方式与应用场景分析
java·笔记·学习·设计模式·享元模式
汪子熙4 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到115 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆9 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er14 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0617 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444019 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆20 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子23 分钟前
Web开发中的文件下载
前端·javascript·面试
Green1Leaves28 分钟前
pytorch学习-11卷积神经网络(高级篇)
pytorch·学习·cnn