前端笔试题 (十二)

56.vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

**

1)state：vuex的基本数据，用来存储变量
2) getter：从基本数据(state)派生的数据，相当于state的计算属性
3) mutation：提交更新数据的方法,是同步的。每个 mutation 都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)
4) action：和muytation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5) modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

**

57.如何画一条0.5px的线?

1)采用meta viewport的方式。

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" 

2)采用transform: scale()的方式

将绘制出来的线条的高度进行半倍的缩放

57.移动端适配

1)百分比方案

使用 百分比% 定义 宽度，高度 用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用max-width/min-width控制尺寸范围过大或者过小。

2)rem方案

rem是相对长度单位,rem方案中的样式设计为相对于根元素font-size计算值的倍数.根据屏幕宽度设置html标签的font-size,在布局时使用rem单位布局达到自适应的目的,是弹性布局的一种实现方式。

实现过程：

首先获取文档根元素和设备dpr，设置 rem，在html文档加载和解析完成后调整body字体大小； 在页面缩放 / 回退 / 前进的时候， 获取元素的内部宽度 (不包括垂直滚动条，边框和外边距)，重新调整 rem 大小。

实现方法：

用css处理器或npm包将页面css样式中的px自动转换成rem.在整个flexible适配方案中,文本使用px作为单位,使用[data-dpr]属性来区分不同dpr下的文本字号.由于手机浏览器对字体显示最小是8px,因此对于小尺寸文字需要采用px为单位,防止通过rem转化后出现显示问题.手机淘宝中的字体使用px为单位,腾讯新闻中的字体使用rem为单位。

3)vh/vw方案

视口是浏览器中用于呈现网页的区域，移动端的视口通常指的是 布局视口
使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本，布局高宽，间距 等，使得这些元素能够随视口大小自适应调整。

4)基于媒体查询的响应式设计

主要实现是通过 媒体查询，通过给不同分辨率的设备编写不同的样式实现响应式布局，用于解决不同设备不同分辨率之间兼容问题，一般是指PC、平板、手机设备之间较大的分辨率差异。实现上不局限于具体的方案，通常结合了 流式布局 + 弹性布局 方案。