概要

标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School

移动端常用meta设置

viewport

viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。

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

• width: viewport 的宽度（ 范围从 200 到 10,000，默认为 980 像素，width=device-width 宽度为设备的宽度 ）
• height: viewport 的高度（ 范围从 223 到 10,000 ）
• initial-scale: 初始的缩放比例（ 范围从>0到 10 ）
• minimum-scale: 允许用户缩放到的最小比例
• maximum-scale: 允许用户缩放到的最大比例
• user-scalable: 用户是否可以手动缩放

最近在移动端的页面开发过程中使用了较多的相对尺寸单位，发现配合移动端页面的响应式特点效果比较好。本来只想介绍这些新的尺寸单位，后来想想还是让那些基础的尺寸单位也露露脸，搭个顺风车。

常见的尺寸单位：

• % -- 百分比
• in -- 寸
• cm -- 厘米
• mm -- 毫米
• pt(point) -- 大约1/72寸
• pc(pica) -- 大约6pt, 1/6寸
• px -- 屏幕的一个像素点
• em -- 相对单位
• ex -- font-size的x-height值，为小写字母x的高度，通常相当于font-size的一半

为什么叫也谈flexbox布局呢？首先网上已经有不少关于这方面知识的介绍，尤其是w3cplus中，分了几篇文章对该知识点进行了较详细的分析，本人一开始也是参考这些文章入门的。随着将该技术用到工作中的mac和h5的项目中，会发现还有一些需要注意的地方，说严重点就是这里边还有坑。这便是“再谈一下flexbox布局”的初衷。

在上篇文章中我提到了搭建一个github pages所用到的东西，从这篇开始将逐一介绍每一个知识点。首先要声明一下：网上关于搭建github pages的文章很多，有些已经介绍的很详细了。我只是将我认为重要的环节和我在搭建过程中遇到的一些问题记录下来，关于那些基本概念和基础的操作将略过，本文的最后会列出我在建站过程中阅读的文章链接供大家参考。

作为一名半吊子的前端开发，一直混迹于博客园，在园子里偶尔分享一下工作中用到的个人感觉还不错的技术。最近受身边同事和朋友的影响，决定在github上弄个blog，毕竟这里才是coder们最终的归属地。