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

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

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

目   录

一、移动端响应式

1.一、响应式尺寸

1.二、解决方案

1.2.一、视口问题

1.2.二、rem思路

1.2.三、如何实现rem的变化！

1.2.四、默认rem是设计为多少呢？

1.2.五、实现

二、项目搭建

2.一、初始化项目

2.二、处理rem

2.三、搭建路由

---

一、移动端响应式

1.一、响应式尺寸

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

1.二、解决方案

rem单位是⼀种解决⽅案。

1.2.一、视口问题

<!-- 移动端，响应式开发必须具有的！ -->
<meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximumscale=1.0, minimum-scale=1.0, user-scalable=0"/>

1.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.三、如何实现rem的变化！

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

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

1.2.四、默认rem是设计为多少呢？

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

1.2.五、实现

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.一、初始化项目

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

2.二、处理rem

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

<script src="./static/js/rem.js"></script>

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

<meta name="viewport" 
    content="width=device-width, initial-scale=1.0, maximumscale=1.0,minimum-scale=1.0,user-scalable=0"/>

2.三、搭建路由

一、删除helloWorld.vue ⽂件

二、建立pages⽬录，建立⻚⾯⽂件

三、路由配置

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.四、处理静态图片

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

2.五、编写css样式

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

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

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

 

多谢观看~