媒体查询、rem移动端适配

单位

rem： 相对于html元素的字体大小；

em： 相对于父元素的字体大小。

总结： rem可以通过修改html里面的文字大小来改变页面中元素的大小，达到整体控制。

媒体查询

/* 屏幕上宽度在540-969像素之间的显示为粉红色 */
@media screen and (min-width: 540px) and (max-width: 969px) {
    
	body {
    
		background-color: pink;
	}
}
/* 正常从小到大写 可以优化 */
@media screen and (min-width: 540px) {
    
	body {
    
		background-color: pink;
	}
}

1、mediataype查询类型

值	解释说明
all	用于所有设备
print	用于打印机和打印浏览
screen	用于电脑屏幕、平板电脑、智能手机等

2、关键字

值	解释说明
and	可以将多个媒体特性连在一起，相当于“且”
not	排除某个媒体类型，相当于“非”，可以省略
only	指定某个特定的媒体类型，可以省略

3、媒体特性

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大可见区域的宽度

总结： 可以根据不同的屏幕尺寸来改变不同的样式（从小到大写可以优化代码）

4、引入资源

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
eg:
/* 针对不同的屏幕尺寸 调用不同的css文件 */
<link rel="stylesheet" media="srceen and (min-width: 320px)" href="style320.css">
<link rel="stylesheet" media="srceen and (min-width: 640px)" href="style640.css">

Less（css预处理器）

引入了变量，Mixin（混入)，运算以及函数等功能，降低了CSS的维护成本。（常见的预处理器：Sass、Less、Stylus）

安装 npm install -g less

查看版本 less -v

1、定义变量 @ (区分大小写)

@color: pink;
body {
	backgrounk-color: @color
}
div {
    color: @color
}

2、Vscode插件 (Easy LESS)

自动编译成css文件

3、嵌套

遇到伪类、交集选择器，我们内层选择器的前面需要加&

a {
	color: red;
	&:hover {
		color: blue; 
	}
    &::before {
        content: "";
    }
}

4、运算

• 乘号（*）和除号（/）
• 运算符中间左右要有个空格隔开1px + 5
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位

rem适配方案

1、less+媒体查询+rem

1.1 常见设计稿尺寸宽度

设备	常见宽度
iPhone4、5	640px
iPhone6、7、8	750px
Android	大部分4.7~5寸的安卓设备时720px, 现在基本采用750px

1.2 实际开发方案逻辑

1. 首先我们选一套标准尺寸（750为准）；
2. 我们用屏幕尺寸，除以，我们划分的份数，得到了html里面的文字大小，但是我们知道不同屏幕下得到的文字大小是不一样的；
3. 页面元素的rem值 = 页面元素在750像素下的px值 / html 里面的文字大小

2、lib-flexible+rem

2.1、安装插件 lib-flexible

npm i lib-flexible --save

2.3、在main.js中引入lib-flexible

import 'lib-flexible/flexible'

2.4、安装px2rem loader

npm install px2rem-loader

2.5、配置px2rem-loader

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

同时，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

2.6、在vue的项目的根目录中打开 /src/HelloWorld.vue 文件，把template里面的东西全干掉，写上以下这些代码：

<template>
  <div class="hello">
    适配移动端
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.hello {
  width: 200px;
  height: 200px;
  font-size: 36px;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid green;
}
</style>