秋招的第三次面试

Lxhqt

已于 2023-10-04 16:40:41 修改

阅读量36

点赞数

文章标签：面试职场和发展

于 2023-09-28 13:51:48 首次发布

本文链接：https://blog.csdn.net/Lxhqt/article/details/133378743

版权

无顺序问题

1. 自我介绍

实习时遇到的困难有哪些？？遇到什么难解的bug么？
项目移动端有哪些适配？？你对 postcss-pxtorem 以及 amfe-flexible有啥了解不？

移动端的适配可以有：百分比、动态生成viewport、rem、@media（媒体监听），以及各种插件；

百分比：

只能宽度适配吧，以百分号为单位

动态生成viewport：

动态设置缩放比例，动态创建meta标签，并且计算出来的缩放放在这个标签的content属性里，以 px 为单位

rem：

首先要设置视口约束

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

其主要就是 html 根元素字体大小设置屏幕区域的宽度，这样整个屏幕就变成了1rem为基准，设置时以 rem 为单位。一般font-size的基数为设备的1/10

看你使用axios进行token的过期验证，请问返回的token的类型是什么样的？？

token 是服务端生成的一串字符串，客户端在后续请求中只需带上这个 token 请求数据即可，无需再次带上用户名与密码。

服务器返回401时，表示token过期，要重新进行登录设计

微信九宫格咱们布局？？要是是4张图片呢？？ 1~9张图片

在网上以及 gpt 查了下，主要可以用flex、grid、float 进行布局，具体代码如下：

<div class="container">
  <div class="c-item"> 1</div>
  <div class="c-item"> 1</div>
</div>

css样式  --- grid 

.container {
  display: grid;
  grid-template-colums: repeat(3, 1fr);  // 3列布局
  grid-gap: 10px;
}

.c-item {
  width: 100%;
  padding: 20px;
  text-align: center;         // 文本居中对齐
  border:   1px solid #ccc;
}

grid-template-columns 用来设置每一行中单个元素的宽度
grid-template-rows 用来设置每一列中单个元素的高度
grid-gap  用来设置盒子之间的间距

css样式 --- flex 

.container {
  display: flex;
  flex-warp: wrap;
  width: 100%;
  height: 100%;
}

.c-item: {
  width: 30%;
  height: 30%;
}

但是存在一个问题： 就是如果只有一张图片，那么该图片只占父盒子高度的30%，那会与下部分的内容呈现很大的间距，有些不好看。

css样式 --- float

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.c-item {
  float: left;
  width: 33%;
  height: 33%; 
}


需要给父盒子设置宽度，然后给每个盒子也设置宽高，达到自动换行的效果；
由于子元素浮动，因此要给父盒子加上overflow ， 消除浮动带来的影响。