使用post-css实现移动端适配

介绍移动端适配以及适配方案

        适配原因         

  1. 移动端不像PC端,有足够大的屏幕展示较多的内容
  2. 不同的移动端设备,有不同屏幕宽度
  3. 同样大小的页面元素在不同屏幕宽度设备展示时,布局就会错乱
  4. 有些元素没有展示在可视范围内
  5. 有些元素不能撑满整个屏幕,有空白区域

        常用适配方案

  1. 不同端使用不同代码,比如 PC 端一套代码,移动端一套代码
  2. 不同端使用同一套代码,一般使用 CSS 样式来控制--@media
  3. 移动端屏幕适配
    1. 利用 rem 按根节点(body)的字体大小来缩放
    2. 利用 vh/vw 按屏幕高度和宽度来缩放

        rem适配方案

使用post-css实现移动端适配_第1张图片

       存在的适配问题:

  • 手动计算适配大小的问题
    • 动态适配:用户屏幕设备不是只有750px
    • 统一修改:需要一个个计算并修改,工作量大
  • rem解决方案

    • rem是跟px类似的CSS数量单位
      • 当前属性大小值按根节点 body 的 font-size 等比例计算
    • 将css属性单位从px改为rem
    • 动态获取用户设备的屏幕宽度
    • 使用post-css实现移动端适配_第2张图片
    • px转rem计算公式
    • 使用post-css实现移动端适配_第3张图片

介绍post-css

css转换工具。

使用post-css实现移动端适配_第4张图片

AST语法树

  • autoprefixer插件: 自动管理 CSS 属性的浏览器前缀
  • postcss-pxtorem插件: px转换为rem

使用post-css实现移动端适配

  • 安装命令
    • npm i postcss autoprefixer postcss-pxtorem -D
  • 创建并配置文件postcss.config.js
    • 使用post-css实现移动端适配_第5张图片
  • 使用post-css进行适配
    • 使用post-css实现移动端适配_第6张图片
    • 使用post-css实现移动端适配_第7张图片
    • 使用post-css实现移动端适配_第8张图片

你可能感兴趣的:(vue3,css,html,前端)