[JavaScript知识库]前端面试题总结(理解性记忆)----更新中(1-5)

一. html与css

1.em 和 rem 的区别是什么

em单位,是使用em单位的元素的字体大小,父元素会影响到其大小(因为继承的原因)

rem单位,是相对于根元素的字体大小,也就是一个html的字体大小

2.rem?适配的原理

利用媒体查询@media,根据屏幕大小不同时分别设置一个html的font-size大小,页面中的px单位转化为rem单位,当一个根元素的字体发生变化时,其他尺寸也会跟着变化,从而达到适配的效果

移动端适配:

? ? ? 1. 结合flexible.js,内部原理是将屏幕划分为10份,只需要手动设置html的font-size大小(750px设计稿/10 ) VSCode中插件 cssrem??px 转换rem

? ? ? 2.vh与vw?

100vw相当于100%的视口宽度? ?100vh相当于100%的视口高度

如果此时375px的设计稿(屏幕宽度),100px的div,100px的字体大小,(375px=100vw;1px=100vw/375)

? ? ? 3. vue中移动端适配:插件①amfe-flexible(屏幕分为10份,原理同上),?②安装postcss-pxtorem@5.0.0 将px转rem?注意版本问题?

? ? ? ? ?配置字体大小,创建postcss.config.js? 代码如下

module.exports = {
  plugins: {
    rootValue: 37.5, // 基准值(设计稿/份数10),
    // propList:哪些css需要转化
    propList: ['*']
  }
}

//设计稿为1080  723px用rem表示  723/108rem

?如果有两套标准,ui设计有一套方案大小等,还有一套是vant组件库的样式大小,只需要把配置更改一下,如下:?加入判断条件

//file.dirname:得到文件路径
//如果是组件库的css解析,它的文件都来自于node_modules/vant

const path = require('path')
module.exports = ({ file }) => {
//判断当前文件路径是否包含vant,如果包含就是解析的vant的css
//(假设vant的尺寸是375,设计稿是750)

  const base = file.dirname.includes(path.join('node_modules', 'vant'))
    ? 37.5 //  vant尺寸px/10
    : 75 //  设计稿大小px/10
  return {
    plugins: {
      rootValue: base, // 基准值(设计稿/份数10),
      // propList:哪些css需要转化
      propList: ['*']
    }
  }
}

?3.HTML 的语义化你是怎么理解的

让内容可以更具有语义,有利于SEO,也更有助于理解

4.margin-top 的百分比相对谁，例如 margin-top: 50% 是什么意思

是相对于父盒子宽度的百分比,子盒子上边距的距离是父盒子宽度的50%,(注意上边距塌陷问题,父盒子加边框...)

5.说一下 Less 你用过哪些特性（除了变量、嵌套、计算）

可以定义方法,如下:

定义:

.border(@w,@color){

.border:@w?solid @color

}

使用:

.app{

.border(1px,red)

}