CSS移动端开发基础（二）：技术选型与适配方案全解析

一、移动端技术选型概览移动端开发主要有两种技术路线方案核心思路代表技术适用场景响应式页面​一套代码兼容多端百分比、flex、rem、媒体查询内容简单的官网、博客单独移动端页面​为移动端单独设计流式布局、flex、rem、vw/vh电商、社交等大型应用实际项目推荐采用混合布局以一种技术为主其他技术为辅灵活组合使用。二、响应式页面方案媒体查询2.1 媒体查询Media Query作用针对不同的媒体类型定义不同的样式针对不同的屏幕尺寸设置不同的样式当浏览器窗口大小变化时页面样式随之重新渲染2.2 语法结构media 媒体类型 关键字 (媒体特性) { /* CSS样式 */ }2.3 媒体类型值说明all所有设备print打印设备或打印预览screen带屏幕的设备电脑、手机✅最常用​speech屏幕阅读器可以同时使用多个媒体类型用逗号隔开表示或的关系。2.4 关键字关键字说明and将多个媒体特性连接到一起相当于且的关系not排除某个媒体类型相当于非的关系可省略only指定某个特定的媒体类型可省略2.5 媒体特性特性说明width页面可见宽度max-width视口最大宽度≤指定值时生效min-width视口最小宽度≥指定值时生效max-height视口最大高度min-height视口最小高度orientation: landscape横屏orientation: portrait竖屏2.6 常用断点断点Breakpoint样式切换的分界点。尺寸范围设备划分对应写法 768px超小屏幕max-width: 768px≥ 768px ~ 992px小屏幕min-width: 768px且max-width: 992px≥ 992px ~ 1200px中型屏幕min-width: 992px且max-width: 1200px≥ 1200px大屏幕min-width: 1200px2.7 三种写法示例写法一完整写法内联样式/* width 1200px背景色 #ccc标题红色 */ media screen and (min-width: 1200px) { body { background-color: #ccc; } h1 { color: #f00; } }写法二简写写法省略媒体类型和关键字/* 992px width 1200px */ media (min-width: 992px) and (max-width: 1199px) { body { background-color: #f00; } h1 { color: #0f0; } } /* 768px width 992px */ media (min-width: 768px) and (max-width: 991px) { body { background-color: #0f0; } h1 { color: #00f; } }写法三外联样式!-- 768px width 992px -- link relstylesheet href./04.css mediascreen and (min-width: 768px) and (max-width: 992px) !-- width 768px -- link relstylesheet href./0402.css media(max-width: 767px)三、响应式框架BootstrapBootstrap 是最流行的响应式前端框架之一可以帮助快速搭建响应式页面。官方网站​ Bootstrap中文网特点基于栅格系统实现响应式布局预置了大量UI组件社区活跃文档完善四、单独移动端页面方案4.1 流式布局百分比布局定义​ 通过将盒子的宽度设置成百分比根据屏幕宽度进行伸缩不受固定像素限制。核心属性.box { width: 50%; /* 宽度按百分比设置 */ max-width: 600px; /* 最大宽度限制 */ min-width: 300px; /* 最小宽度限制 */ max-height: 400px; /* 最大高度限制 */ min-height: 200px; /* 最小高度限制 */ }注意​ 配合max-width和min-width使用防止元素被过度挤压。4.2 Flex弹性布局详见之前的《CSS弹性盒子布局Flex详解》文档。五、rem适配方案5.1 rem单位rem​ 是相对单位相对于html根元素的字体大小。通过更改html的文字大小可以改变整个页面的尺寸。html { font-size: 37.5px; /* 1rem 37.5px */ } .box { width: 2rem; /* 实际宽度 75px */ }5.2 rem适配原理核心公式根字体大小 手机横向设备独立像素值 / 10 设计稿元素rem值 设计值 / (设计稿宽度 / 10)示例iPhone6 设计稿 375px根字体大小 375 / 10 37.5px 1rem 37.5px 设计稿中 100px 的盒子 → rem值 100 / (375/10) 100 / 37.5 ≈ 2.667rem5.3 rem适配步骤第一步确定设计稿宽度设置根字体大小 设计稿宽度 / 10 第二步引入 flexible.js动态修改 html 字体大小 第三步正常根据设计稿开发将所有 px 值换算为 rem 值5.4 flexible.js简介​ 手机淘宝团队出品的移动端适配库。原理是将当前设备设备独立像素 CSS像素划分为10等份动态计算并设置html的字体大小。GitHub地址​ https://github.com/amfe/lib-flexible官方文档​ https://github.com/amfe/article/issues/175.5 VSCode插件推荐插件名称​px to rem rpx vw (cssrem)配置方法安装插件设置Cssrem: Root Font Size为设计稿宽度 / 10例如 750px 设计稿 → 设置为75使用效果​ 在CSS中输入px值插件会自动提示对应的rem值。六、vw/vh适配方案6.1 vw/vh单位单位说明vwViewports Width1vw 视口宽度的1%vhViewports Height1vh 视口高度的1%vminvw和vh中的较小值vmaxvw和vh中的较大值6.2 750px设计稿的vw适配计算过程屏幕宽度 100vw 750px 1vw 7.5px 1px 0.13333vw 自定义 1rem 100px 100px 13.333vw配置代码html { font-size: 13.3333vw; /* 750设计稿1rem 100px */ }使用示例​ 设计稿中 200px 的盒子字体 50px.box { width: 2rem; /* 200px / 100 2rem */ height: 2rem; font-size: 0.5rem; /* 50px / 100 0.5rem */ }6.3 1080px设计稿的vw适配计算过程屏幕宽度 100vw 1080px 1px 0.09259vw 自定义 1rem 100px 100px 9.259vw配置代码html { font-size: 9.259vw; /* 1080设计稿1rem 100px */ }使用示例​ 设计稿中 200px 的盒子字体 50px.box { width: 2rem; /* 200px / 100 2rem */ height: 2rem; font-size: 0.5rem; /* 50px / 100 0.5rem */ }6.4 vw适配方案总结1. 确定设计稿宽度 2. 自定义 1rem 100px方便计算 3. 计算 1px ? vw进而得出 100px ? vw 4. 设置 html { font-size: xxxvw } 5. 设计稿中的所有尺寸 ÷ 100单位写 rem七、两种适配方案对比对比项flexible.js方案vw方案参考基准设备独立像素视口宽度计算方式JS动态计算CSS直接设置单位remrem底层依赖vw未来趋势逐渐被vw取代更推荐的方案共同点​ 最终都是把设计稿中的 px 换算成 rem 来书写。八、混合布局主流方案推荐做法​ 综合使用以上所有技术选取一种为主要技术选型其他技术为辅助。典型技术栈组合技术用途rem/vw​核心适配方案flex​页面布局百分比​宽度自适应媒体查询​特定断点样式调整九、总结本文详细介绍了移动端开发的几种技术选型和适配方案响应式方案媒体查询 Bootstrap框架单独移动端方案流式布局、flex布局rem适配flexible.js cssrem插件vw适配未来趋势直接利用视口单位混合布局综合使用多种技术移动端开发推荐步骤① 拿到设计稿 → 确定宽度750px / 1080px 等 ② 选择适配方案推荐 vw 或 flexible.js ③ 配置根字体大小 ④ 使用 flex 进行页面布局 ⑤ 所有尺寸使用 rem 单位书写 ⑥ 配合媒体查询处理特殊断点掌握这些知识后你将能够从容应对各种移动端项目的适配需求。