移动端app内嵌网页开发框架

框架技术栈

之前开发过一个项目，app内嵌网页应用使用Antd mobile + React + mobx + webpack的技术栈来开发。记录一下对于移动端开发中特殊的一些点：

自适应布局

我们在移动端开发时，需要设置meta 标签的视口viewport, 让视觉视口宽度等于理想视口宽度。重点是让css像素等于1个设备独立像素，便于开发。

css单位

自适应布局的基础是css单位，如果设置px的话可以依靠媒体查询来根据情况显示不同的布局，但是这样的方法是比较繁琐的，强烈建议使用vw和vh来作为单位。移动端常用个的相对的单位有：

• em 作为font-size时代表父元素的字体大小
• rem 代表相对于根元素的字体大小
• vw：代表视觉视口宽度的1%
• vh：代表市局视口宽度的1%
• vmin： vw和vh的较小值
• vmzx：vw和vh的较大值

显然用视口的百分比来作为单位能很好的自适应移动端的许多不同设备size，比如视觉视口的宽度为iPhone se的 375, 那么1vw就是375 / 100 = 3.75px; 那么比如我们要设置一个提交button的宽度为300px，那么我们需要设置width为：300 / 3.75 = 80vw，那么在其他size的手机上就能够按比例呈现。而设计稿一般都是标注px单位的，我们在css中也习惯直观的使用px作为单位。那么如果我们使用了webpack，可以使用post-px-to-viewport插件来自动转换px

 {
  test: /\.less/,
  loader: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss-less',
        plugins: (loader) => [
          postcssCssnext(),
          postcssPxToViewport({
            viewportWidth: 750, // (Number) The width of