移动端适配的几种解决办法

所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示

原则

  1. 开发时方便,写代码时设置的值要和标注的 160px 相关
  2. 方案要适配大多数手机屏幕,并且无 BUG
  3. 用户体验要好,页面看着没有不适感

思路

  1. 写页面时,按照设计稿写固定宽度,最后再统一缩放处理,在不同手机上都能用
  2. 按照设计稿的标准开发页面,在手机上部分内容根据屏幕宽度等比缩放,部分内容按需要变化,需要缩放的元素使用 rem, vw 相对单位,不需要缩放的使用 px
  3. 固定尺寸+弹性布局,不需要缩放

viewport 适配

 initial-scale = 屏幕的宽度 / 设计稿的宽度。一般设计稿的尺寸是实际开发尺寸的2倍。开发的时候根据设计稿/2即可。


  
                    
                    

你可能感兴趣的:(高级前端全栈教程系列,面试系列,移动端,适配,前端)