移动端适配(rem)

手机的分辨率不同,如何在不同的手机上保持显示相同的表现,常见的方案有两种:

1: 使用响应式布局,

(1):通过媒体 查询@media来实现

• 媒体查询可以让我们根据设备显示器的特性(如视口宽度,屏幕比例,设备方向,横向或纵向)为其设定css样式.(即根据设备的不同的宽度为同一页面设置不同的css样式)
  (2)写两套代码,一套Pc端,一套移动端,通过user Agent判断用户使用的设备,跳转到相应的网站

2:使用rem

• (1)元素的度量单位

  px:相对长度单位.像素是相对于显示器分辨率而言的.
  em:表示相对尺寸,其相对于当前对象文本的font-size(相对于父元素)
  rem:是css3新增的一个相对单位,其参考对象是根元素的font-size,

• (2)rem的计算公式
  元素的宽度(高度)=html的font-size*rem

• (3)使用rem进行移动端适配的原理

• 第一步:根据iphone的宽度(375px)作为参考.给他的跟严肃节点设置font-size大小

• 第二部:获取手机屏幕宽度,根据屏幕宽度,以iphone6作为参照物进行等比例缩放

3:在项目中配置rem

第一种方法:

在html的头部加上以下代码,元素单位全部用rem来表示

    
     

第二种方法:

1. 安装amfe-flexible,作用是根据手机大小设置根标签字体

   npm i amfe-flexible --save-dev
   

2. 在main.js中导入

   import 'amfe-flexible'
   

3. 安装postcss-pxtorem // 把px编程rem
   less,scc(预处理语言) => css => postcss(后处理语言)

   npm i postcss-pxtorem --save-dev
   

4. 在vue-cli3项目根目录创建vue.config.js,添加以下代码

   const pxtorem = require("postcss-pxtorem");
   module.exports = {
     css: {
       loaderOptions: {
         postcss: {
           plugins: [
             //  autoprefixer(),
             pxtorem({
               rootValue: 37.5,
               propList: ["*"]
             })
           ]
         }
       }
     }
   };