移动端开发的准备

Posted by Eight Nine on 2021-10-26

前言

最近在进行移动端的项目开发,记录表一下移动端开发要用的知识和工具

一. 常见的移动开发布局

  • 流式布局
    • 也就是我们最常用的百分比布局
    • 缺点是在移动端的兼容性没有很好
  • flex布局
    • 由于移动端浏览器的发展较晚,移动端基本上都兼容flex布局
    • flex布局主要针对宽度进行自适应,对高度的适应能力不足
  • rem布局

二.开发环境

  • 我使用的是vue3+Ts+less环境,稍微介绍一下如何创建

    • 在主目录下,vue create 项目名—–vue-cli3环境

    • 选择相应的配置,一直回车即可

三.rem介绍

​ 在介绍rem之前,让我们回忆一下em这个单位。 em,表示的是父元素的font-size,即1em = 父元素的font-size. 这样一来,rem的意义也就显而易见,表示的是根元素的font-size。 而页面的根元素,就是html,所以rem表示的是html的font-size大小

四.移动端自适应

  • 媒介查询+rem

    • 媒介查询可以判断屏幕的大小,进而给不同的屏幕大小设置不同的font-size,实现页面随着屏幕大小变化而变化
    • 在这种模式下,布局页面不再使用px,而是使用rem
  • flexible.js

    • flexible.js将rem设为页面宽度的十分之一,不用自己手动为不同的宽度配置fts

    • 一般都会搭配一个神奇的库使用—-postcss-px2rem

      • px2rem会将px自动转为rem单位,实现不同屏幕大小的自适应
    • 安装方法
      • 我只介绍在vue3环境下的安装

        • ```javascript
          npm install lib-flexible –save

        npm install postcss-px2rem –save

        //在main.js中
        import ‘lib-flexible’

        //在vue.config.js中
        module.exports = {

            css: {
                loaderOptions: {
                 css: {},
                 postcss: {
                 plugins: [
                      require('postcss-px2rem')({
                        remUnit: 37.5
                      })
                   ]
                 }
               }
           },
        

        }
        ```

    • 1635250632760

总结

第一次接触移动开发,其实和web端没有太大区别,实现自适应也有专门的插件应用,希望为后来西二的同学开一条捷径