前端3+1-10

html

题目：viewport常见设置都有哪些？
答案：

<meta name="viewport" content="width: device-width, ...">

width；宽度；具体数值（比如600）or 设备宽度（device-width）
height；高度；一般无用
initial-scale；初始缩放比例；具体数值（比如1.0）
maximum-scale；允许用户缩放的最大比例；具体数值（比如1.0）
minimum-scale；允许用户缩放的最小比例；具体数值（比如1.0）
user-scalable；是否允许用户缩放；no 或 yes

css

题目：对比px、em、rem
答案：

• px；
  即css像素，固定单位，但实际渲染效果取决于屏幕的分辨率；
  低频的一般1px等于1个物理像素，高频的一般1px大于一个物理像素
  不适用于响应式网站

• em；
  相对单位，相对于当前元素font-size；
  （如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）
  适用于响应式网站，但容易出错，因为嵌套

• rem；
  相对单位，相对于根元素（html body）的font-size；
  默认1em等于16px，为了便于计算，可以在body设置font-size：62.5%，即让1rem=10px
  适用于响应式网站，对ie8以下由兼容性问题

• ps：
  px：像素点的宽度
  em：该元素字体像素大小 * 希望得到的多少倍（比如1em则乘以1）
  rem：根元素字体像素大小 * 希望得到的多少倍（比如1rem则乘以1）

• 实例
  em；元素的width/height/padding/margin用em的话是相对于该元素的font-size；子元素的font-size如果是em，则应先参照它的父元素计算，其它长度再参照它

<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>

div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}
span {
  font-size: 0.5em;  
  width: 10em;
  height: 10em;
  border: solid 1px blue;
  display: block;
}

rem；全部的长度都相对于根元素

<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>

html {
    font-size: 10px;
    }
div {
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
    height: 30rem;
    border: solid 1px black;
}
p {
    font-size: 2rem; /* 20px */
    width: 15rem;
    height: 15rem;
    border: solid 1px red;
}
span {
    font-size: 1.5rem;
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    display: block;
}