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

相关推荐
blackA_1 小时前
数据库MySQL学习——day4(更多查询操作与更新数据)
数据库·学习·mysql
Freedom风间1 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军2 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军2 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪2 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer2 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
梁下轻语的秋缘2 小时前
每日c/c++题 备战蓝桥杯(P1049 [NOIP 2001 普及组] 装箱问题)
c语言·c++·学习·蓝桥杯
山海上的风3 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发3 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
刘婉晴3 小时前
【信息安全工程师备考笔记】第三章 密码学基本理论
笔记·安全·密码学