css 响应式

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

css 常用单位

单位	说明
px	绝对单位，页面按精确像素展示
pt	点（points），大约是1/72寸
%	百分比，相对父元素
vw	视窗宽度（viewpoint width），1vw = 视窗宽度1%
vh	视窗高度（viewpoint height），1vh = 视窗高度1%
vmin	vw 和 vh 中较小的那个
vmax	vw 和 vh 中较大的那个
rem	相对单位，相对根节点 html 的字体大小计算。chrome/firefox/IE9+ 支持
em	相对单位，基准点以父节点字体大小，如自身定义了 font-size 按自身计算，否则按浏览器默认字体大小，不是固定的值
in	寸
cm	厘米
mm	毫米

• 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

响应式布局的常用方案

• media-query，根据不同的屏幕宽度设置根元素 font-size
• rem，基于根元素的相对单位

<style type="text/css">
    @media only screen and (max-width: 374px) {
        html {
            font-size: 86px;
        }
    }
    @media only screen and (min-width: 375px) and (max-width: 413px) {
        html {
            font-size: 100px;
        }
    }
    @media only screen and (min-width: 414px) {
        html {
            font-size: 110px;
        }
    }
    body {
        font-size: 0.16rem;
    }
    #div1 {
        width: 1rem;
    }
</style>

vw/vh

• rem 的弊端

  “阶梯”性：上面例子就具有“阶梯”性，屏幕宽度 375px 到 413px 的 font-size 是不变的。

• 网页视口尺寸

  window.screen.height：屏幕高度
  window.innerHeight：网页视口高度
  document.body.clientHeight：body 高度

• vw: 网页视口宽度的 1/100

• vh: 网页视口高度的 1/100

<style type="text/css">
    #container {
        width: 10vw;
        height: 10vh;
        background: red;
    }
</style>