{"action":"opened","issue":{"url":"https://api.github.com/repos/lili21/blog/issues/3","labels_url":"https://api.github.com/repos/lili21/blog/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/lili21/blog/issues/3/comments","events_url":"https://api.github.com/repos/lili21/blog/issues/3/events","html_url":"https://github.com/lili21/blog/issues/3","id":86475975,"number":3,"title":"视窗单位 vs 百分比","user":{"login":"lili21","id":4456380,"avatar_url":"https://avatars.githubusercontent.com/u/4456380?v=3","gravatar_id":"","url":"https://api.github.com/users/lili21","html_url":"https://github.com/lili21","followers_url":"https://api.github.com/users/lili21/followers","following_url":"https://api.github.com/users/lili21/following{/other_user}","gists_url":"https://api.github.com/users/lili21/gists{/gist_id}","starred_url":"https://api.github.com/users/lili21/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lili21/subscriptions","organizations_url":"https://api.github.com/users/lili21/orgs","repos_url":"https://api.github.com/users/lili21/repos","events_url":"https://api.github.com/users/lili21/events{/privacy}","received_events_url":"https://api.github.com/users/lili21/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-06-09T06:41:14Z","updated_at":"2015-06-09T06:41:14Z","closed_at":null,"body":"### 视窗单位\r\n视窗单位是相对值，他们的大小由浏览器可视窗口的大小决定。下表列出了相对于视窗的4个单位值。\r\n名称 | 单位 | 描述\r\n------ | ------ | ------\r\n视窗宽 | vw | 视窗宽度的 1/100\r\n视窗高 | vh | 视窗高度的 1/100\r\n最小视窗 | vmin | 视窗高度，宽度中小值的 1/100\r\n最大视窗 | vmax | 视窗高度，宽度中大值的 1/100\r\n\r\n后两种单位几乎很难用到，所以这里只关注`vh`和`vw`。\r\n\r\n视窗单位与百分比在功能上是存在部分重叠的，但它们有各自的有缺点。tl;dr\r\n> 百分比在宽度上更实用，而`vh`在高度上更好用\r\n\r\n### 满屏宽度 － % > vw\r\n`vw`单位基于可视窗口的宽度，然后浏览器计算的可视窗口包含了浏览器的滚动条。\r\n![image](http://bitsofco.de/img/blog/14/viewportvsbody.jpg)\r\n这也就意味着，如果存在滚动条，那么视窗的宽度将会大于内容区域的宽度\r\n> viewport > html\r\n\r\n所以，如果你把一个元素的宽度设为100vw，这个元素将会超出html的范围。如下面这个例子，我给html设置了红色的边框，给section设置了背景色\r\n![viewport>html](http://bitsofco.de/img/blog/14/viewportvsbody2.png)\r\n所以如果要达到满屏宽度的效果，百分比效果要好于视窗单位\r\n\r\n### 满屏高度 － vh > %\r\n"}}