前端面试题

最新推荐文章于 2022-08-22 09:57:13 发布

楚楚梦厦

最新推荐文章于 2022-08-22 09:57:13 发布

阅读量408

点赞数 1

分类专栏：前端文章标签：前端面试 vue JavaScript HTML和CSS 个人整理

本文链接：https://blog.csdn.net/s18438610353/article/details/100933085

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

第一章. HTML(5)

1.1 冷

1. 浏览器的内核

IE: trident
Firefox：gecko ，开源
Safari:webkit
Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)。

2. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

3. BOM 对象有哪些，列举 window 对象？

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
document 对象，文档对象；
location 对象，浏览器当前 URL 信息；
navigator 对象，浏览器本身信息；
screen 对象，客户端屏幕信息；
history 对象，浏览器访问历史信息；

4. 简述 ajax 的过程。

1.创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
2.创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
3.设置响应 HTTP 请求状态变化的函数
4.发送 HTTP 请求
5.获取异步调用返回的数据
6.使用 JavaScript 和 DOM 实现局部刷新

function ajax(obj) {
    return new Promise((resolve, reject) => {
        //1、 创建xhr对象
        const xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        // 2、打开浏览器的连接
        xhr.open('GET', obj.url, false);
        xhr.setRequestHeader('Accept', 'application/json')
        // 4、判断服务器的状态，若准备就绪，就去获取数据
        xhr.onreadystatechange = function () {
            if (xhr.readyState !== 4) return; //证明服务器已经准备就绪
            if (xhr.status === 200 || xhr.status === 304) { //页面请求成功
                resolve(xhr.responseText);
            } else  {
                reject(new Error(xhr.responseText))
            }
        }
    })
}

5. src和href的区别

src指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。
href是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。

1.2 经典

1. 渐进增强和优雅降级之间的不同?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

2. 盒子模型(浏览器的标准模式和怪异模式)与BFC？

CSS 的盒子模型有两种：

IE 盒子模型（怪异模式）。
标准的 W3C 盒子模型模型（标准模式）。

在标准模型中，盒模型的宽高只是内容（content）的宽高
在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
css如何设置两种模型？

/* 标准模式 */
box-sizing:content-box;

 /*怪异模式*/
box-sizing:border-box;

边距重叠解决方案(BFC)：(Block Formatting Context)
BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。 BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用。
怎么取创建BFC

float属性不为none（脱离文档流）
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
根元素,即HTML元素

应用场景

自适应两栏布局防⽌⽂字环绕
防止元素塌陷
清除内部浮动
防止垂直margin重叠

3. HTML的块级元素、行内元素、行内块元素

行内元素、块级元素和行内块元素的区别:
①块级元素：独占一行，能设置宽高。
②行内元素：不独占一行，不能设置宽高。
③行内块元素：不独占一行，但可以设置宽高。
常见的行内元素和行内块元素:
①常见的行内块元素： img input
②常见的行内元素： span a select等

4. HTML的自定义属性

HTML5新增了个dataset属性来存取 data-*自定义属性的值。这个 dataset 属性是HTML5 JavaScript API的一部分，用来返回一个所有选择元素 data- 属性的DOMStringMap对象。使用这种方法时，不是使用完整的属性名，如 data-index 来存取数据，应该去掉data- 前缀。还有一点特别注意的是： data- 属性名如果包含了连字符，例如：data-index-color ，连字符将被去掉，并转换为驼峰式的命名，前面的属性名转换后应该是：indexColor 。

5. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

前端面试汇总之浏览器输入URL加载显示发生了什么

1.当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
2.浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3.一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4.此时，Web 服务器提供资源服务，客户端开始下载资源。
参考1
参考2

6. 前端开发的优化问题

（1）减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存，图片服务器。
（2）前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。
（4）当需要设置的样式很多时设置 className 而不是直接操作 style。
（5）少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。
（6）避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（8）避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比 div+css 布局慢。
压缩、合并，减少请求，代码层析优化

7. 前端储存的⽅式

cookies、localstorage、sessionstorage、Web SQL、IndexedDB

cookies：在HTML5标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k，⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦需要自行封装
localStorage：HTML5加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除非手动删除），大小为5M，兼容IE8+
sessionStorage：与localStorage基本类似，5MB,区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、 localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式
Web SQL：2010年被W3C废弃的本地数据库数据存储⽅案，但是主流浏览器（⽕狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript时要进⾏转换，较为繁琐。
IndexedDB：是被正式纳⼊HTML5标准的数据库储存⽅案，它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合web场景，同时⽤JavaScript进⾏操作会⾮常⽅便

第二章. CSS(3)

2.1 冷

1. 选择器优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

2. link和@import的区别？

link属于HTML标签，⽽@import是CSS提供的。
⻚⾯被加载时，link会同时被加载，⽽@import引⽤的CSS会等到⻚⾯被加载完再加载。
import只在IE 5以上才能识别，而link是HTML标签，⽆兼容问题。
link⽅式的样式权重⾼于@import的权重。
使⽤dom控制样式时的差别。当使⽤javascript控制dom去改变样式的时候，只能使⽤link标签，因为@import不是 dom可以控制的。

3. 如何理解层叠上下文

层叠上下⽂是HTML元素的三维概念，这些HTML元素在⼀条假想的相对于⾯向（电脑屏幕的）视窗或者⽹⻚的⽤户的z 轴上延伸，HTML元素依据其⾃身属性按照优先级顺序占⽤层叠上下⽂的空间。

如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。

z-index的理解：

仅在定位元素（定义了position属性，且属性值为非static值的元素）上有效果。
判断元素在Z轴上的堆叠顺序，不仅仅是直接比较两个元素的z-index值的大小，这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定。

产⽣层叠上下⽂

HTML中的根元素本身就具有层叠上下文，称为“根层叠上下文”
普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
CSS3中的新属性也可以产生层叠上下文。
- ⼀个 z-index 值不为 "auto"的 flex 项⽬ (flex item)，即：⽗元素 display: flex|inline-flex，
- opacity 属性值⼩于 1 的元素
- transform 属性值不为 "none"的元素，
- mix-blend-mode 属性值不为 "normal"的元素，
- filter值不为“none”的元素，
- perspective值不为“none”的元素，
- isolation 属性被设置为 "isolate"的元素， position: fixed
- 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
- -webkit-overflow-scrolling 属性被设置 "touch"的元素

4. rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

5. display:none 与 visibility:hidden 的区别是什么？

使用 display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将 “丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

3.2 热

1. 怎样实现样式中多余字隐藏显示为省略号？

	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;

2. transition属性

3. flex

(1).基本概念
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
(2). 容器的属性
① flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

② flex-wrap
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。它可能取三个值

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

③ flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

④ justify-content
justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

⑤ align-items
align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

⑥ align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between 
  | space-around | stretch;
}

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

(3). 项目的属性
① flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

② flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

③flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

④ flex属性
是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex: 非负数值
表示
flex-grow：非负数值   flex-shrink: 1  flex-basis: 0%

第三章. JavaScript

前端面试汇总之JavaScript

第四章. Node

4.1 req.params, req.query, req.body三者的区别?

1. req.params所对应的url长这个样子 http://localhost:3000/10.

		app.get("/:id",function (req,res) {
		    .........
		});

把请求 / 后面的参数当成id，通过req.params就能获取到id，返回页面也就是10。
2. req.query所对应的url长这个样子http://localhost:3000/?id=10.
3. req.body
req.body是用在post请求当中。

4.2 cookie和session.

cookie和session的关系与区别:
① cookie就是浏览器上的一块空间，用来记录一些信息。在每次请求的时候，get与post请求只要不跨域，浏览器都会主动带上cookie，例如session_id，当每次请求的时候，后端会根据session_id来判断请求是哪个用户发起的。
②相反，如果跨域了是不会主动带上cookie的。后端首先得明确声明一个origin。access-control-origin:(如具体到)https://www.songtang.xyz.前端必须在ajax请求里面主动声明with-Credentials:true

4.3 node特点

高性能：基于v8引擎的
IO密集：I input O Output 请求api接口操作数据库操作文件
单线程：js的主线程是单线程，
高并发：
异步非阻塞:

4.4 事件环

js的事件环https://blog.csdn.net/s18438610353/article/details/117413586

第五章. Vue

https://blog.csdn.net/s18438610353/article/details/101167369

第六章. 计算机网络

6.1 HTTP(超文本传输协议)

前端面试汇总之HTTP

request

请求行: 方法路径协议
请求头: 浏览器添加自己也可以添加
请求正文: 给服务器的数据

axios ajax fetch

(1).jQuery ajax

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

(2). axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）
从浏览器中创建 XMLHttpRequest
拦截、转换、取消请求和响应
自动转换JSON数据
客户端支持防止CSRF/XSRF

(3). fetch

符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
更好更方便的写法，更加底层，丰富的API（request, response）
脱离了XHR，是ES规范里新的实现方式
1）fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
2）fetch默认不会带cookie，需要添加配置项
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
4）fetch没有办法原生监测请求的进度，而XHR可以

6.2 TCP/UDP

Transmission Control Protocol 传输控制协议
User Datagram Protocol 用户数据报协议

传输层与网络层的的区别

传输层提供应用进程之间的逻辑通信，即端到端的通信，而网络层提供的是主机之间的逻辑通信。
传输层可以提供两种不同的协议，即TCP面向连接的可靠传输和UDP无连接的不可靠传输而网络层无法同时实现两种协议（即在网络层要么只提供面向连接的服务如虚电路，要么只提供无连接服务如数据报，而不能在网络层同时出现这两种方式）

端口
端口就是传输层服务访问点TSAP，它在传输层的作用类似于IP地址在网络层或MAC地址在数据链路层的作用，只不过IP地址和MAC地址标识的是主机，而端口标识的是主机中的应用进程。
服务端端口号，熟知端口号为0-1023，登记端口号为1024-49151

常见端口号如下：

应用程序	FTP	TALENT	SMTP	DNS	TFTP	HTTP	SNMP
熟知端口号	21	23	25	53	69	80	161

6.3 经典考察

打开一个网页，整个过程会使用哪些协议

第七章. 数据结构与算法

7.1 常见函数

驼峰转化函数

    /**
     * 已知有字符串 foo="get-element-by-id",写一个 function 将其转化成驼 峰表示法"getElementById"。
     */

    function combo(msg) {
        let arr = msg.split("-"); // 将字符串数据切割成数组
        for(let i = 1; i < arr.length; i++) { // 驼峰第一个单词一般还是小写的，默认msg也小写
            /**
             *  charAt() 方法可返回指定位置的字符。
             *  JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。
             *  截取数组中的字符串的第一个字符并转为大写，在拼接上剩下的字符串
             */
            arr[i] = arr[i].charAt(0).toLocaleUpperCase() + arr[i].substring(1);
        }
        msg = arr.join("");
        return msg;
    }
    let finalData = combo("wrap-nav-user-sex");
    console.log(finalData); // wrapNavUserSex

数组去重

7.2 排序算法

数据结构

第八章项目相关

webpack
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

entry:入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
如webpack.config.js

	module.exports = {
	  entry: './path/to/my/entry/file.js'
	};

output: 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

	const path = require('path');
	
	module.exports = {
	  entry: './path/to/my/entry/file.js',
	  output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: 'my-first-webpack.bundle.js'
	  }
	};

loader: 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
在更高层面，在 webpack 的配置中 loader 有两个目标：
- test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
- use 属性，表示进行转换时，应该使用哪个 loader。

	const path = require('path');
	
	const config = {
	  output: {
	    filename: 'my-first-webpack.bundle.js'
	  },
	  module: {
	    rules: [
	      { test: /\.txt$/, use: 'raw-loader' }
	    ]
	  }
	};
	
	module.exports = config;

插件(plugins):插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

	const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
	const webpack = require('webpack'); // 用于访问内置插件
	
	const config = {
	  module: {
	    rules: [
	      { test: /\.txt$/, use: 'raw-loader' }
	    ]
	  },
	  plugins: [
	    new HtmlWebpackPlugin({template: './src/index.html'})
	  ]
	};
	
	module.exports = config;

响应式布局&自适应布局

响应式布局:
使用一套布局代码在不同终端展示，根据屏幕尺寸的大小对页面的布局进行改造（即当屏幕变小时，开发者可能会让标题栏中原本显示10个子标题现在只显示5个，隐藏剩下的5个或者让其在第二行出现）

常用技术：

控制视口（viewport）

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

CSS的媒体查询（media query）
使用@media 查询，针对不同的媒体类型定义不同的样式

@media only screen and (max-width: 480px){
     display: none;
}

自适应布局:
使用一套布局代码不会根据屏幕大小改变布局结构，它只是会等比缩小或者放大对应内容的尺寸。

rem(百分比) 如flexible.js
flex弹性布局