移动端单页面应用开发记录移动端页面怎么开发~ 移动端页面需要注意的事项：响应式布局、设计稿处理、单页面应用vue+va

背景

心血来潮，简单记录一下移动端页面怎么开发~

移动端页面需要注意的事项：

响应式布局

移动设备的多样性，屏幕尺寸和分辨率的不同，页面要实现成响应式的，能够适应各种屏幕尺寸。

性能优化

移动设备的硬件性能和网络状况通常不如桌面设备，所以你需要尽可能地优化你的页面，减少页面的加载时间和运行时的性能开销。你可以通过减少 HTTP 请求、优化图片、使用 CSS 和 JS 压缩、利用缓存等技术来提高性能。

测试

确保在各种设备和浏览器上都进行充分的测试，安卓、ios都要兼顾。真机测试的话，可以手机跟电脑接入同一个网络。PC端用anywhere启动静态页的项目，手机就能访问啦。

框架选型

vue单页面应用~ 哈哈不知道过时没有啦。 vue + vant

注意事项

设计稿的处理：通常，移动端的设计稿尺寸会以 iPhone 6/7/8 的尺寸（375px * 667px）作为基准，但实际像素可能是设计稿的 2 倍或 3 倍（视网膜屏幕）。在处理这些设计稿时，你可能需要将设计稿的尺寸转换为 CSS 的像素值。通常，你可以设置一个基准值（比如 1rem = 75px），然后使用 rem 单位来进行布局，这样可以方便地进行响应式设计。

html {
    /* 1rem 的值在 12px 到 100px 之间 */
    font-size: min(max(12px, calc(100vw / 10)), 100px);
}

视口设置：确保你的 HTML 文件的头部包含正确的视口设置，如 <meta name="viewport" content="width=device-width, initial-scale=1">，这将使得你的网站在各种设备上正确显示。
页面根元素可以视情况调整为 width: 100vw

页面基本雏形

自己下载vue的js和vant相关js，放到自己的本地文件目录或者自己创个cdn来用

引入后，就可以开发单页面应该啦


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  <meta content="email=no" name="format-detection" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <title>这是一个页面</title>
  <link rel="stylesheet" href="../css/reset.css" />
  <link rel="stylesheet" href="../css/init.css">

  <link rel="stylesheet" href="../js/vant@2.9/index.css" />
  <!-- cdn引入vant样式 -->

  <script src="../utils/utils.js"></script>
  <script src="../js/vue.min.js"></script>
  <script src="../js/vue-resource.min.js"></script>
  <script src="../js/vant@2.9.vant.min.js"></script>
  <!-- cdn引入vant组件 -->
</head>

<body>
  <div id="app" class="main-wrapper">

    <div class="con-box">

      <!-- 页面内容 -->
      <template v-if="['1'].includes(appType)">
        <p>展示一下vue的if使用~~</p>
      </template>

    </div>
    
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        appType: '1',
      },
      mounted: function () {
        this.initData()
      },
      methods: {
        initData() {
          this.appType = getParam('appType') || this.appType
        }
      }
    })
    Vue.use(vant.Dialog);
  </script>
</body>

</html>