基于媒体查询和rem的响应式布局实践
媒体查询 @media
我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局。
下图展示了利用 @media
实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。
我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局。
下图展示了利用 @media
实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。
本文将会介绍如何将自己写的组件库打包成第三方库,发布到 npm 上,同时支持在原生 js / React/ Vue 下使用。Webpack4 的升级指南可以参考下 Webpack4.0 升级配置,本文不做赘述。
webpack 彪版本号的速度真是飞快,4.0 发布没多久上去看的时候才 4.1.*,现在已经刷到 4.8.1 了,给人一种“我版本号很高了,可以安心升级了”的感觉,然而坑依然很多…尤其是 API 文档,到处可见 3.0 的陈旧信息。Code Splitting 章节点进去依然在讲 CommonsChunkPlugin ,CommonsChunkPlugin 点进去提示去看 SplitChunksPlugin,看文档的时候经常会迷失自我,心累…好了,吐槽完毕,下面是正文。需要直接复制粘贴的同学直接拉到最后~
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 相等。
DTD(文档类型定义)是一组机器可读的规则,他定义 XML 或 HTML 的特定版本中允许有什么,不允许有什么。而 DOCTYPE 是用来描述使用哪个 DTD,保证网页以标准模式渲染,一个不含任何 DOCTYPE 的网页将会以 怪异(quirks) 模式渲染。HTML5 之前的 HTML 基于 SGML(Standard Generalized Markup Language, 标准通用标记语言)标准,需要 DTD 来保证在标准模式下渲染。HTML5 只需要 DOCTYPE 就可以保证在标准模式下渲染。