比较几种移动端自适应布局方案

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

百分比布局

• 百分比做手机适配的方法是子元素相对于父元素的百分之多少，做手机端的适配，整体布局可以实现不同屏幕的缩放
• 优点
  • 原理简单，不存在兼容性问题
• 缺点：
  • 元素内的字体以及位置难以做到不同屏幕上的放大和缩小
  • 百分比布局只适合布局简单的页面，定制化要求比较高复杂的页面，实现很困难

媒体查询

• 主要是通过查询设备的宽度来执行不同的css代码，最终达到界面的配置

    @media only screen and (max-width:374px) {
        /* iphone5 或者更小尺寸，以iphone5的宽度 320px 比例设置样式 */
    }
    @media only screen and (min-width:375px) {
        /* iphone6、7、8、x */
    }
    @media only screen and (min-width:414px) {
        /* iphone6p 或者更大尺寸，以iphone6p的宽度 414px 比例设置样式 */
    }

• 优点：
  • 针对移动端PC端维护同一套代码时，方法简单，成本低
• 缺点：
  • 代码量大，后期维护困难

Flex布局

• 优点
  • 根据弹性布局的规则，可容易的实现某种布局效果，是现在大多数项目采用的布局方式
• 缺点
  • 相对来说，兼容性不是很好

vw布局

视口是浏览器中用于呈现网页的区域

• vw：1vw等于视口宽度的1%

• vh：1vh等于视口高度的1%

• vmin：选取vw和vh中最小的那个

• vmax：选取vw和vh最大的那个

• 缺点：

  • 兼容性问题

• 优点：

  • 纯css移动端适配方案，无需结合js
  • 相比于rem，vw更加清晰简单些

rem + viewport缩放

• 优点：
  • 兼容性相对较好，页面不会因为伸缩变形，自适应效果好
• 缺点：

  • 需要配合js监听分辨率变化来改变font-size

  • rem转换成px时可能会存在小数，浏览器会自动四舍五入，长度无法精确

• 解决移动端1px问题
  • 问题原因：
    • 所有设备上css像素单位设置为1px值的时候，都是一样粗的
    • retina屏上的物理像素假设是一般屏幕两倍，也就是说，同样css 1px；retina屏有2个物理像素显示，而普通屏只有1个像素显示；虽然都是一样粗，但是设计师在设计的时候，是按照retina1个物理像素的显示逻辑去定义1px的，这个是实际的物理像素即retina屏上的1物理像素=设计师1px；而我们理解为css1px，所以，导致设计师觉得变粗了，因为在retina上可以变的更细，即用1px物理像素去显示，所以此时css=0.5px才是正确的
  • 解决思路：
    • 根据不同屏幕大小，等比缩放。通过监听不同屏幕大小，动态改变html的font-size属性。font-size如何计算？1rem = 750/10 + 'px'
    • 根据设备像素比，去设置view-port上的scale值，使他的物理像素始终等于css像素

总结

• 对于严格要求还原高保真，包括1px问题的建议rem+viwport方案
• flex布局简单易上手，而且轻松实现想要的布局也是大多数项目的首选
• 当然，不同的布局方案可组合使用，比如项目中既有flex也有vw布局也有rem等等，可根据项目实际情况灵活使用