前端基础面试题

L?z ^f my

于 2020-08-10 20:30:38 发布

阅读量665

点赞数

分类专栏： interview

本文链接：https://blog.csdn.net/Luzahngfeng/article/details/107921368

版权

interview 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.html+css

h5 新特性

语义化标签：header、footer、section、nav、aside、article、main。。。
增强型表单：input 的多个 type（color、date、email、number、tel、url、search、time…）
新增表单元素：datalist、Keygen、output
新增表单属性：placehoder、require、min、max
音频视频：audio、video
画布：canvas
地理定位
拖拽
本地存储：localStorage、sessionStorage、indexDB
新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
webSocket：单个 TCP 连接上进行全双工通信协议

c3 的新特性[^不常考][答几个就好了]

css3 边框
- 边框圆角：border-radius （IE9+）
- 盒子阴影：border-shadow（IE9+）
- 边框图片：border-image（IE 不支持）
css3 背景
- 背景图片：background-image
- 背景大小：background-size
- 背景起始位置：background-origin
- 背景裁切：background-clip

css3 渐变

线性渐变：linear-gradient

background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: linear-gradient(red, blue);
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 重复线性渐变 */
background: linear-gradient(180deg, red, blue); /* 角度线性渐变 */

径向渐变：radial-gradient

/* 渐变的中心、形状（圆形或椭圆形）、大小、颜色 */
background: radial-gradient(center, shape size, start-color, ..., last-color)
/* 重复径向渐变 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);

css3 文本效果
- 文本阴影：text-shadow: 水平阴影垂直阴影模糊的距离阴影的颜色
- 盒子阴影：box-shadow: x轴偏移 y轴偏移模糊距离阴影颜色
- 文本溢出：text-overflow: clip|ellipsis|string
- 文本换行：word-wrap: normal|break-word
- 单词拆分：word-break: normal|break-all|keep-all

css3 字体

定义字体：@font-face

@font-face
{
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div
{
   font-family:myFirstFont;
}

css3 弹性盒子（display: flex）
- 主轴方向：flex-direction (默认水平)
- 主轴对齐方式：justify-content
- 侧轴对齐方式：align-items
- 是否允许换行：flex-wrap
- 堆栈（由flex-wrap产生的独立行）对齐：align-content

css3 过渡

属性：transition

transition: 指定需要变化的属性（例如width）,完成时间, 转速曲线(例如linear), 延迟执行的时间

css3 动画

属性：@keyframes、animation

// 定义动画
@keyframes myfirst
{
	from {background: red;}
	to {background: yellow;}
}
// OR
@keyframes myfirst
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

div {
	animation: myfirst 5s; // 使用动画
}

css3 2D 转换

属性：transform、transform-origin

方法：translate()、rotate()、scale()、skew()、matrix()

transform: translate(x轴移动距离, y轴移动距离) // 移动
transform: rotate(angle) // 括号内填写旋转角度（deg）
transform: scale(x轴缩放比, y轴缩放比) // 缩放
transform: skew(相对于x轴角度, 相对于y轴角度)

css3 3D 转换
- 方法：translate3d(x, y, z)、scale3d(x, y, z)、rotate3d(x, y, z, angle)、perspective(n)（透视）
css3 调整尺寸
- resize属性指定一个元素是否应该由用户去调整大小
```
resize: none|both|horizontal|vertical
```

css3 媒体查询

例子

@media screen and (max-width: 960px) {
    body {
        background-color: darkgoldenrod;
    }
}
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

盒子的处置水平居中[^常考]

方法一：利用定位（常用方法,推荐）
.parent{
	position:relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

方法二：利用margin:auto;
.parent{
	position:relative;
}
.child{
    position:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

方法三：利用display:table-cell;
.parent{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.child{
	display:inline-block;
}

方法四：利用display：flex;设置垂直水平都居中；
.parent{
    display:flex;
    justify-content:center;
    align-items:center;
}

方法五：利用transform
.parent{
	position:relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

方法六：利用calc计算
.parent{
	position:relative;
}
.child{
    position:absolute;
    top:calc(200px);//（父元素高-子元素高）÷ 2=200px
    let:calc(200px);//（父元素宽-子元素宽）÷ 2=200px
}

css 的问题[^常考]

opacity

rbga： background: rgba(255, 0 ,0, 1)

filter:Alpha(opacity=x) 兼容设置
隐藏 div 的方式

设置透明度（opacity）

设置显隐（display：隐藏后不占空间、visibility：隐藏后仍占空间）

设置宽/高为0

单行多行文本超出显示省略号

/* 单行文本 */
.s-ellipsis{
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 多行文本 */
.m-ellipsis{
    width: 200px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

css的行内与块级元素有哪些：
- 常见的行内元素: <a>, <b>, <br> , <del>, <em>, <i>, <iframe>, <img>, <input>, <label>, <strong>
```
特点：**设置宽度无效，只能通过 line-height 设置高度，设置 margin、padding 时，只有左右有效，上下无效**
```
- 常见的块级元素：body、div、ul、ol、li、h1-h6、p、table、from

伪元素和伪类的区别：根本区别在于：它们是否创造了新的元素
高度塌陷问题？

解决高度塌陷的方式：所谓的高度塌陷就是子元素脱离文档流，和父元素不在一个层级，未设置高宽的父元素里面没有子元素的支撑就会塌陷
清除浮动的方式：

1.给父级也加浮动

2.给元素设置高度

3.给父级加 display: inline-block

4.在浮动元素最下加

.clear{ height: 0px; font-size: 0; clear: both;}

5.给浮动元素父级加 overflow:hidden

6.给元素添加伪元素 clearfix
flex 布局

一些常用的，比如：方向（flex-direction），对齐方式（主轴方向对齐方式，侧轴方向对齐方式），是否换行（flex-wrap），flex:1(占满剩余空间)。。。
你用过 sass 中的哪些语法？
- 定义变量
- 选择器嵌套
- 混合：使用@include来调用声明好的混合宏
- 继承：通过关键词 @extend来继承已存在的类样式块

2.js问题[^重点]

js的事件循环
- 调用栈（执行栈）中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取-执行的操作，就形成了事件循环。
- 第一次事件循环中，JavaScript 引擎会把整个 script 代码当成一个宏任务执行，执行完成之后，再检测本次循环中是否寻在微任务，存在的话就依次从微任务的任务队列中读取执行完所有的微任务，再读取宏任务的任务队列中的任务执行，再执行所有的微任务，如此循环。JS 的执行顺序就是每次事件循环中的宏任务-微任务。
先加载主进程再处理任务队列的任务，先处理宏任务再处理微任务

微任务：promise

宏任务：settimeout

阻止事件冒泡与事件默认行为

阻止事件冒泡：w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

阻止事件默认行为：w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false

js的数组方法[^记几个就行了]

方法名对应版本功能原数组是否改变
concat() ES5- 数组连接，并返回连接之后的新数组 n
join() ES5- 使用分隔符，将数组转为字符串并返回 n
pop() ES5- 删除最后一位，并返回删除的数据 y
shift() ES5- 删除第一位，并返回删除的数据 y
unshift() ES5- 在第一位新增一或多个数据，返回长度 y
push() ES5- 在最后一位新增一或多个数据，返回长度 y
reverse() ES5- 反转数组，返回结果 y
slice() ES5- 截取指定位置的数组，并返回 n
sort() ES5- 排序（字符规则），返回结果 y
splice() ES5- 删除指定位置，并替换，返回删除的数据 y
toString() ES5- 直接转为字符串，并返回 n
valueOf() ES5- 返回数组对象的原始值 n
indexOf() ES5 查询并返回数据的索引 n
lastIndexOf() ES5 反向查询并返回数据的索引 n
forEach() ES5 参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self；forEach没有返回值 n
map() ES5 同forEach，同时回调函数返回数据，组成新数组由map返回 n
filter() ES5 同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回 n
every() ES5 同forEach，同时回调函数返回布尔值，全部为true，由every返回true n
some() ES5 同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true n
reduce() ES5 归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduce返回 n
reduceRight() ES5 反向归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduceRight返回 n

闭包
当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。

闭包特点：
1. 外部访问函数内部变量成为可能；
2. 局部变量会常驻在内存中；
3. 可以避免使用全局变量，防止全局变量污染；
4. 会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

方法名	对应版本	功能	原数组是否改变
concat()	ES5-	数组连接，并返回连接之后的新数组	n
join()	ES5-	使用分隔符，将数组转为字符串并返回	n
pop()	ES5-	删除最后一位，并返回删除的数据	y
shift()	ES5-	删除第一位，并返回删除的数据	y
unshift()	ES5-	在第一位新增一或多个数据，返回长度	y
push()	ES5-	在最后一位新增一或多个数据，返回长度	y
reverse()	ES5-	反转数组，返回结果	y
slice()	ES5-	截取指定位置的数组，并返回	n
sort()	ES5-	排序（字符规则），返回结果	y
splice()	ES5-	删除指定位置，并替换，返回删除的数据	y
toString()	ES5-	直接转为字符串，并返回	n
valueOf()	ES5-	返回数组对象的原始值	n
indexOf()	ES5	查询并返回数据的索引	n
lastIndexOf()	ES5	反向查询并返回数据的索引	n
forEach()	ES5	参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self；forEach没有返回值	n
map()	ES5	同forEach，同时回调函数返回数据，组成新数组由map返回	n
filter()	ES5	同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回	n
every()	ES5	同forEach，同时回调函数返回布尔值，全部为true，由every返回true	n
some()	ES5	同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true	n
reduce()	ES5	归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduce返回	n
reduceRight()	ES5	反向归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduceRight返回	n

原型与原型链：链接

数据类型
八种加上es6新增的symbol和es7新增的bigint

简单数据类型是值存储：String、Number、boolean、null、undefined

引用数据类型是地址的存储：Object
- object 包含的 function、Array、Date 等类型
继承方式有哪些
- 原型链继承：让新实例的原型等于父类的实例
  
  特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）
  缺点：1、新实例无法向父类构造函数传参。
  　　　2、继承单一。
  　　　3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）
- 借用构造函数继承
  
  重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））
  特点：1、只继承了父类构造函数的属性，没有继承父类原型的属性。
  　　　2、解决了原型链继承缺点1、2、3。
  　　　3、可以继承多个构造函数属性（call多个）。
  　　　4、在子实例中可向父实例传参。
  缺点：1、只能继承父类构造函数的属性。
  　　　2、无法实现构造函数的复用。（每次用每次都要重新调用）
  　　　3、每个新实例都有父类构造函数的副本，臃肿。
- 组合继承（组合原型链继承和借用构造函数继承）（常用）
  
  重点：结合了两种模式的优点，传参和复用
  特点：1、可以继承父类原型上的属性，可以传参，可复用。
  　　　2、每个新实例引入的构造函数属性是私有的。
  缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。
- calss 类继承。。。

3.浏览器问题

浏览器的渲染文件过程：
- 根据 html 文件构建 DOM 树和 CSSOM 树。构建 DOM 树期间，如果遇到 JS，阻塞 DOM 树及 CSSOM 树的构建，优先加载 JS 文件，加载完毕，再继续构建 DOM 树及 CSSOM 树。
- 构建渲染树（Render Tree）。
- 页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了 DOM 节点，根据 JS 对 DOM 操作动作的大小，浏览器对页面进行重绘或是重排。
从输入 url 到页面加载发生了什么？
- 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
- 解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
- 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
- 服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
- 释放 TCP连接;
- 浏览器将该 html 文本并显示内容;
浏览器的缓存机制：点击查看
回流重绘
引起回流：
- 改变 DOM 树结构，比如添加或者删除可见的元素、改变文本内容、改变位置
- 改变元素几何尺寸：边距、填充、边框、宽度和高度
- 改变浏览器窗口尺寸
- 伪类激活，在用户交互过程中发生
引起重绘：render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响 render 树重新布局的，比如修改字体颜色
4.http协议：链接
http协议的三次握手，三次握手为什么不是两次或者四次握手：链接
http的请求方式

get、post、put、delete、head(获取报头)、connect(管道代理)、options(查看服务器性能)、trace(测试、诊断)
post和get的区别：
- get 参数通过 url 传递，post 放在 request body 中。
- get 请求在 url 中传递的参数是有长度限制的，而 post 没有。
- get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。
- get 请求只能进行url编码，而 post 支持多种编码方式
- get 请求会被浏览器主动cache （缓存），post 则不会，除非手动设置。
- get 请求参数会被完整保留在浏览历史记录里，而 post 中的参数不会被保留。
- GET 和POST 本质上就是 TCP链接，并无差别。但是由于 HTTP 的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
- GET产生一个TCP数据包；POST产生两个TCP数据包。

5.跨域问题

引起跨域的原因：浏览器的同源策略限制
什么是同源策略？

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。同源策略/SOP（Same origin policy）是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策略。如果缺少了同源策略，浏览器很容易受到 XSS、 CSFR 等攻击。
解决同源策略的方法：1. jsonp；2. 代理；3. 配置 cors

6.前端的性能优化

减少 http 请求
将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
减少对 dom 的操作，减少重绘与回流次数

7.vue框架的问题

vuex的了解（作用：用于全局状态管理）链接
vuex 仓库（store）的五大核心：
1. state ：专门存储共享数据的地方
2. getters ：针对现有 state 数据或者其余的 getter 数据做二次计算的数据，可以理解为仓库的计算属性
3. mutations ：唯一能够修改 state 数据的地方，并且只能同步修改。
4. actions ：这里面可以写异步代码，如果如要修改 state 中的数据，必须通过调用 mutation 来修改
5. modules ：仓库模块的拆分
vuex 仓库中的四个辅助函数：
1. mapState() 获取 state 中的数据
2. mapGetters() 获取 getters 中的数据
3. mapMutations() 获取 mutations 配置项中同步修改 state 中数据的方法
4. mapActions() 获取 actions 配置项中异步修改 state 中数据的方法
vue中key的作用：

主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
vue的双向数据绑定原理：（数据劫持）

说法一：Vue 在创建实例的时候，会将数据配置到实例中，然后通过 Object.defineProperty 方法，为数据动态的添加 get 和 set 方法，当获取数据时，会触发对应的 get 方法，当设置数据时，会触发 set 方法，当 set 方法触发完成后内部会进一步触发 watcher 方法，当数据发生改变，就会自动更新视图数据。

说法二：Vue 是采用数据劫持配合发布订阅模式的方式，通过 Object.defineProperty 来劫持各个属性的 setter 和 getter，在数据发生变化时，发布消息给依赖收集器（Dep）,去通知观察者，做出对应的回调函数，去更新视图；Vue 类作为绑定的入口，整合 Observer，Compile 和 Watcher 三者，通过 Observer 来监听 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 与 Compile 之间的通信桥梁，达到数据变化驱动视图更新，视图交互变化驱动数据 model 变更的双向绑定效果。
vue的生命周期及钩子函数查看链接
vue的组件传值（包括 prop 解耦）
v-if和v-show的区别：
- v-if：值为 true 时，元素被创建，false 时元素没移除（直接从 dom 上面将其干掉），可以使用在 template 标签上
- v-show:：通过设置元素的 display 属性来元素的显示与隐藏，不能用在 template 标签上
Tip：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销，所以，如果需要频繁切换，用 v-show 较好；如果在运行时条件很少改变，使用 v-if 较好
v-model 的作用与原理

作用：用于表单元素的数据双向绑定

原理：本质上是个语法糖：1. 给输入框动态绑定 value 属性，2. 绑定 input 事件（value = 输入框里面的值）

数组更新检测
- 变异数组方法，可以被检测数据的变动；push、pop、shift、unshift、splice、sort、reverse（反转）
- 非变异数组方法，不能被检测数据变动；filter、concat（连接）、slice（截取）、map…
解决数据不能被检测的方法：
1. Vue.set(vm.arr, index, newValue) 或者是 vm.$set(vm.arr, index, newValue)
2. vm.arr.splice(start, 1, newValue)
3. 修改数组的长度：vm.arr.splice(newLength)
axios 的封装

请求拦截：设置 baseURL；设置公共的请求头信息等

响应拦截：统一错误处理
使用 keep-alive 包裹的组件有什么不一样？链接

还会问3.0

3.0的话简单介绍下把，用ts重构的，用composition api替换了 optionsapi ，很多内容是抄袭的reducx -hook

8.网络安全

xss跨站脚本攻击：指攻击者在网页上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对客户端浏览器进行控制或获取用户隐私数据的方式

防范：httpOnly防止截取cookie、用户输入检查、用户输出检查、利用CSP（浏览器的内容安全策略）

csrf跨站请求伪造：劫持受信任用户向服务器发送非预期请求的方式。

防范：验证码、referer check、增加token验证

9.工具类的区别

webpack和gulp的区别
1. 虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。
2. gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。
3. webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。
git的使用（尽量回答平时使用的可视化工具这样开发效率高）

10.es6

var、let 和 const 三者的区别
1. let、const 声明的变量仅在块级作用域内有效，var 声明变量是全局的，没有块级作用域功能
2. let 、const 不存在变量提升 , var 存在变量
3. let 、const 不能在同一块级作用域内重复申请
priomse
promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
promise有三个状态：
1. pending [待定]初始状态
2. fulfilled [实现]操作成功
3. rejected [被否决]操作失败
Promise对象的状态改变，只有两种可能：1. 从pending变为fulfilled；2. 从pending变为rejected。这两种情况只要发生，状态就凝固了，不会再变了。
.then() 的使用： 接收两个回调函数作为参数，分别代表fulfilled（成功）和rejected（失败）
.catch(）的使用： 接受一个失败的回调函数作为参数
Promise.all() 批量执行： Promise.all([p1, p2, p3]) 用于将多个promise实例，包装成一个新的 Promise 实例；数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变；当所有的子Promise都完成，该Promise完成，返回值是全部值得数组；有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果。
Promise.race() 的使用： 类似于Promise.all() ，区别在于它有任意一个完成就算完成。
es moudle 就回答个导入导出就行了
函数 this 指向问题
箭头函数没有自己的 this, 它的 this 是继承而来; 默认指向在定义它时所处的对象(宿主对象)，,而不是执行时的对象
- this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj
- 在默认情况(非严格模式下,未使用 ‘use strict’),没找到直接调用者,则this指的是 window （常见的window的属性和方法有: alert, location,document,parseInt,setTimeout,setInterval等）(约定俗成)
- 在严格模式下,没有直接调用者的函数中的this是 undefined
- 使用call,apply,bind(ES5新增)绑定的,this指的是绑定的对象
11.移动端开发问题
- 单位
- 布局方式
  - 百分比布局
  - rem 布局
  - Flexible.js布局（完美现任）
    
    Flexible.js是阿里团队开源的一个库，其本质还是rem混合vw进行布局，只是这个库可以自动帮你计算其中的一些转换关系
- 遇见的困难
  就说兼容问题，还有百分比布局的高度塌陷问题。
  1. 移动端HTML5 audio autoplay失效问题?
    
    解决：由于自动播放网页中的音频或视频会给用户带来困扰或不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发才播放;解决方法思路:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了
  2. 移动端样式兼容处理？
    
    解决：1.设置meta标签viewport属性,使其无视设备的真实分辨率,直接通过dpi在物理尺寸和浏览器之间重设分辨率,从而达到能有统一的分辨率的效果,并且禁止掉用户缩放；2.使用rem进行屏幕适配,设置好root元素的font-size大小,然后在开发的时候所有与像素有关的布局统一换成rem单位;针对不同的手机使用媒体查询对root元素font-size进行调整
  3. html5碰到上下拉动滚动条时卡顿/慢怎么解决？
    
    解决: overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
  4. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?
    
    解决：经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone 4的960640分辨率在网页里只显示了480320,这样devicePixelRatio＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背景图来代替img标签(一般情况都是用2倍),例如一个div的宽高是100100,背景图必须得200200,然后background-size:contain;,这样显示出来的图片就比较清晰了
  5. 移动端 1px 边框渲染成 2px 问题？
    
    解决：使用伪元素模拟边框，并设置 transfrom：scaleY(0.5)

L?z ^f my

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础面试题

1.html+cssh5 新特性语义化标签：header、footer、section、nav、aside、article、main。。。增强型表单：input 的多个 type（color、date、email、number、tel、url、search、time…）新增表单元素：datalist、Keygen、output新增表单属性：placehoder、require、min、max音频视频：audio、video画布：canvas地理定位拖拽本地存储：localStora
复制链接

扫一扫