# day_09

**Repository Path**: zangcenyang/day_09

## Basic Information

- **Project Name**: day_09
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Vuex的五大核心及代表的意义？

1、state - 存放Vuex store实例的状态对象，用于定义共享的数据。 

2、Action -动作，向store发出调用通知，执行异步操作   (啊科神)

​	**$store.dispath('')**

3、Mutations -修改器，它只用于修改state中定义的状态变量。（同步） （）

​	**$store.commit('',params)。**

4、getter -读取器，外部程序通过它获取变量的具体值，或者在取值前做一些计算（可以认为是store的计算属性）   **$sotre.getters.fun()**

5、modules对state进行分类处理 

## 响应式布局(RWD）

​	响应式网站设计简称（RWD）,一次开发，多端适配，从而提供完整而友好的用户体验。

实现方法

 1. 百分比布局

    对**width**、**height**、**padding**、**margin**设置百分比来适配不同的屏幕

    > 其他属性象border、font-size不能设置百分比

 2. 媒体查询(CSS3 @media )  米迪尔

    ​	利用媒体查询设置不同分辨率下的css样式，来适配不同的屏幕

    ```css
    /*屏幕宽度在400~900px之间的*/
    @media screen and (min-width: 400px) and (max-width: 900px) {
        div:nth-child(1){
            width: 50%;
        }
        div:nth-child(2){
            width: 50%;
        }
        div:nth-child(3){
            width: 100%;
        }
    }
    
    /*屏幕宽度在0~400px之间*/
    @media screen and (max-width: 400px) {
        div:nth-child(1){
            width: 100%;
        }
        div:nth-child(2){
            width: 100%;
        }
        div:nth-child(3){
            width: 100%;
        }
    }
    
    ```

3. rem响应式布局

   ​	当前页面中元素的rem单位的样式值都是针对于html元素的font-size 的值进行动态计算的，所以有两种方式可以达到适配不同的屏幕：

   ​	(1)、利用 js 动态计算赋值 

   ​	(2)、利用媒体查询，在不同的分辨率下给html的font-size赋值

   >谷歌浏览器强制设置font-size最小值12px

4. vw、vh、vmax、vmin响应式布局

   ​	vh、vw：根据设备宽高为标准，元素单位px转化为vw或vh；

   ​	vmin：取宽高中的最小值计算

   ​	vmax：取宽高中的最大值计算

   ​	比如font-size: 12px，PSD文件（设备）宽度375，转换公式12*100/375，则样式改为font-size: 3.2vw

5. flex 弹性布局

   ​	利用css3弹性布局-- flex 属性来适配不同屏幕

   ​	使用时给父元素设置display: flex，给子元素设置flex: 1，子元素会把父元素平分，子元素会随着父元素的大小改变而改变

   ```css
   /*弹性盒子属性*/
   flex-direction 		决定主轴的方向
   flex-wrap			如果一条轴线排不下，如何换行。
   flex-flow  			是以上两个属性的简写形式，默认值为row nowrap
   justify-content		定义项目在主轴上的对齐方式。
   align-items			定义项目在交叉轴上如何对齐。
   align-content  		⽤于修改 flex-wrap 属性的⾏为。设置各个⾏的对齐
   ```