Vue.js-Day06-AM【项目实战(附带 完整项目源码)-day01-am：移动端响应式（响应式尺寸、视口问题、实现rem变化、rem设计）、实战项目搭建（初始化项目、处理rem、搭建路由）】

Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】

实战项目源码【链接：https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA   提取码：n6ol】

目   录

1、移动端响应式

1.1、响应式尺寸

1.2、解决方案

1.2.1、视口问题

1.2.2、rem思路

1.2.3、如何实现rem的变化！

1.2.4、默认rem是设计为多少呢？

1.2.5、实现

2、项目搭建

2.1、初始化项目

2.2、处理rem

2.3、搭建路由

---

1、移动端响应式

1.1、响应式尺寸

• 移动端屏幕的尺⼨是特别多的，所以不可能像pc端那样，将尺⼨固定死。移动端开发的时候，尺寸是不建议写死单位的，如：固定值为多少px。因为多少px⽆论在哪种设备上⾯都是⼀样的效果， 所以⼤⼩尺⼨不同的设备给⽤户的界⾯效果是不⼀样的！
• 希望有⼀种单位可以实现屏幕尺⼨的⼀个动态变化！

1.2、解决方案

rem单位是⼀种解决⽅案。

1.2.1、视口问题

1.2.2、rem思路

rem是⼀个相对单位！1rem 的⼤⼩ 等于 html标签的font-size⼤⼩！

默认html标签 的font-size是16px. 也就是说 1rem 默认等于 16px.

默认：

html{
    font-size: 16px; /* 默认 */
}
.box{
    width: 10rem; /* 160px */
    height: 10rem;
}

修改：

html{
    font-size: 20px; /* 默认 */ 
}
.box{
    width: 10rem; /* 200px */
    height: 10rem;
}

如果说⽹⻚⾥⾯的所有单位都使⽤了rem去实现，就是说：所有的尺⼨⼤⼩都依赖于html标签的font-size⼤⼩。可以通过js去实现控制：在不同屏幕尺⼨下，修改 html标签的font-size⼤⼩！这样就可以实现不同屏幕下所有⻚⾯内容的⼤⼩动态变 化。

1.2.3、如何实现rem的变化！

UI设计师在设计移动端的，宽度是以 375位尺⼨（iPhoneX），⾼度是根据内容决定 的。

设计师新建的画布是 750px的。因为设计师设计移动端的时候⼀般都是2倍图！

1.2.4、默认rem是设计为多少呢？

• 1rem = 100px 呢？？？
• ⽬的： 为了换算容易！

1.2.5、实现

function setRem() {
    // iphone6
    var defaultRem = 100;     // 基准默认rem大小   使用100的原因是想 计算方便！
    var designWith = 750;    //  基准屏幕设计图尺寸大小
    // 当前设备信息
    var screenWidth = window.innerWidth;    // 获取屏幕宽度！
    //  推出当前设备的rem尺寸大小是多少px
    //  基准默认rem大小/基准屏幕设计图尺寸大小  =  当前的rem大小/当前屏幕尺寸大小
    var curRem = window.innerWidth * (defaultRem / designWith);
    document.getElementsByTagName("html")[0].style = "font-size:" + curRem + "px"
}

setRem();

// 屏幕尺寸发生变化的时候！【onresize 事件会在窗口或框架被调整大小时发生。】
window.onresize = setRem

2、项目搭建

2.1、初始化项目

• vue init webpack meituan
• ...
• cd meituan // 进⼊⽬录
• cnpm i // 安装依赖
• npm run dev // 启动项⽬

2.2、处理rem

将rem.js 放在 static⽬录下⾯的js⽬录⾥⾯，然后在index.html⾥⾯引⼊。

修改index.html⻚⾯⾥⾯的 meta viewport。

2.3、搭建路由

1、删除helloWorld.vue ⽂件

2、创建pages⽬录，创建⻚⾯⽂件

3、路由配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 导入页面组件
import index from "../pages/index"
import user from "../pages/user"
import tuangou from "../pages/tuangou"
import pay from "../pages/pay"
import notfound from "../pages/notfound"

var router = new Router({
  routes: [
    {
      path: '/',
      meta: { title: "美团首页" },
      component: index
    },
    {
      path: '/user',
      meta: { title: "用户中心" },
      component: user
    },
    {
      path: '/tuangou/:id',    // 动态路由！
      meta: { title: "团购详情" },
      component: tuangou
    },
    {
      path: '/pay',
      meta: { title: "支付页面" },
      component: pay
    },
    {
      path: '*',
      meta: { title: "404页面" },
      component: notfound
    }
  ]
})

// 路由拦截
router.beforeEach(function (to, from, next) {
  // 设计标题
  document.title = to.meta.title;
  next();
})


// 暴露路由！
export default router;

2.4、处理静态图片

井img文件夹放在static目录下面。

2.5、编写css样式

• 方式1： 在vue文件里面的style标签里面书写。

• 方式2： 在assets目录下，创建css文件夹，然后在里面创建对应的css文件，然后在.vue的组件里面引入它。

/* 引入css */
@import url(../assets/css/index.css);

 

多谢观看~