基于媒体查询和rem的响应式布局实践

媒体查询 @media

我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局。

下图展示了利用 @media 实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。

Read more

从零搭建 Node.js 线上环境

本文对应 Ubuntu 16.04.4 LTS (GNU/Linux 4.4.0-117-generic x86_64)

Step 1 更新 Ubuntu 源资源列表

1
apt-get update
Read more

Webpack4升级指南

前言

webpack 彪版本号的速度真是飞快,4.0 发布没多久上去看的时候才 4.1.*,现在已经刷到 4.8.1 了,给人一种“我版本号很高了,可以安心升级了”的感觉,然而坑依然很多…尤其是 API 文档,到处可见 3.0 的陈旧信息。Code Splitting 章节点进去依然在讲 CommonsChunkPlugin ,CommonsChunkPlugin 点进去提示去看 SplitChunksPlugin,看文档的时候经常会迷失自我,心累…好了,吐槽完毕,下面是正文。需要直接复制粘贴的同学直接拉到最后~

Read more

前端基础拾遗之CSS篇

盒子模型

CSS 中的每个元素都被表示为一个矩形的盒子,每个盒子有四个边:content edge, padding edge, border edge, and margin edge。

box-sizing: content-box(默认),border-box ,padding-box(deprecated)。

content-box 下盒子实际宽度不等于 width,不包括 padding 和 border 部分,布局计算不方便。border-box 下盒子实际宽度与 width 相等。

Read more

前端基础拾遗之HTML篇

DOCTYPE 作用

DTD(文档类型定义)是一组机器可读的规则,他定义 XML 或 HTML 的特定版本中允许有什么,不允许有什么。而 DOCTYPE 是用来描述使用哪个 DTD,保证网页以标准模式渲染,一个不含任何 DOCTYPE 的网页将会以 怪异(quirks) 模式渲染。HTML5 之前的 HTML 基于 SGML(Standard Generalized Markup Language, 标准通用标记语言)标准,需要 DTD 来保证在标准模式下渲染。HTML5 只需要 DOCTYPE 就可以保证在标准模式下渲染。

Read more