Skip to content
五年前端三年面试
搜索文档
K
Main Navigation
Introduction
JavaScript
React
Interview
BackEnd
BigFront
WebApp
ES6
Browser
HTTP
Performance
Basic
More
Docker
Linux
Git
About
ETF投资智慧
囤比特币
小报童专栏导航
主题
菜单
回到顶部
页面导航
鼓励作者:欢迎打赏犒劳
移动端适配方案
快问快答
响应式布局有几种方式
我觉得很多情况下要多种方案一起用,很多情况下时互补的,媒体查询是必要的
1.媒体查询 2.百分比 3.rem 4.vw/vh
适配方案对比
viewport 缩放方案
适配原理简单
需要使用 JS
直接使用设计稿标注无需换算
方案死板只能实现页面级别整体缩放
动态 REM 方案
是撇原理稍复杂
需要使用 JS
设计稿标注换算到 CSS 的 rem 计算简单
方案灵活技能实现整体缩放又能实现
vw 方案
适配原理简单
不需要 JS 即可适配
设计稿标注的 px 换算到 CSS 的 vw 计算复杂
方案灵活技能实现整体缩放又能实现局部不缩放
参考资料
一篇搞定移动端适配
大厂是怎么做移动端适配的
移动端适配原理篇
可伸缩布局方案 amfe-flexible 解决多端适配问题
移动 web 最佳实践
面试官:你了解过移动端适配吗?