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

时间 2021-08-14

标签 css html ide 布局设计 code htm 开发 rem 栏目无线繁體版

原文原文链接

所谓移动端适配，就是WebApp在不一样尺寸的屏幕上等比显示css

原则html

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

思路ide

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

viewport 适配布局

<meta name="viewport" content="width=750,initial-scale=0.5">

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

<head>
  <script>
    const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width / WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}