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;
}