竞价网站做seo,榨油机 东莞网站建设,邵阳邵东网站建设,建站行业获客1.em
在做手机端的时候经常会用到的做字体的尺寸单位
说白了 em就相当于“倍”#xff0c;比如设置当前的div的字体大小为1.5em#xff0c;则当前的div的字体大小为#xff1a;当前div继承的字体大小*1.5
但是当div进行嵌套的时候#xff0c;em始终是按照当前div继承的字…1.em
在做手机端的时候经常会用到的做字体的尺寸单位
说白了 em就相当于“倍”比如设置当前的div的字体大小为1.5em则当前的div的字体大小为当前div继承的字体大小*1.5
但是当div进行嵌套的时候em始终是按照当前div继承的字体大小来缩放参照后面的例子。
2.rem
这里的r就是root的意思意思是相对于根节点来进行缩放当有嵌套关系的时候嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。
参照后面给的demo
3.vh
vh就是当前屏幕可见高度的1%也就是说
height:100vh height:100%;
但是有个好处是当元素没有内容时候设置height:100%该元素不会被撑开
但是设置height:100vh该元素会被撑开屏幕高度一致。
4.vw
vw就是当前屏幕宽度的1%
补充一句当设置width:100%被设置元素的宽度是按照父元素的宽度来设置
但是100vw是相对于屏幕可见宽度来设置的所以会出现50vw 比50%大的情况
!DOCTYPE html
html langZh-cn
head
meta charsetUTF-8
title恭贺新春/title
/head
style typetext/css mediascreen
html{
font-size: 14px;
}
.em,
.em .em-son,
.em .em-son .em-grandson {
font-size: 1.2em;
}
.rem,
.rem .rem-son,
.rem .rem-son .rem-grandson {
font-size: 1.2rem;
}
.rem-box {
background: #d60b3b;
width:10rem;
height: 10rem;
color: #fff;
text-align: center;
line-height:5rem;
}
.vhvw-box {
background: #d60b3b;
width:50vw;
height: 50vh;
color: #fff;
text-align: center;
line-height:25vh;
}
/style
body
h1em 继承父元素的字体大小来变大或变小多层嵌套字体变化/h1
div classem
字体大小 1.2 * 14父元素body 16px
div classem-son
字体大小 1.2 * 16(父元素em) 20px
div classem-grandson
字体大小 1.2 * 20(父元素em-son) 24px
/div
/div
/div
br
h1rem 继承根节点元素的字体大小来变大或变小多层嵌套字体不变化/h1
div classrem
字体大小 1.2 * 14根节点html 16px
div classrem-son
字体大小 1.2 * 14根节点html 16px
div classrem-grandson
字体大小 1.2 * 14根节点html 16px
/div
/div
/div
br
h1rem 也可作为固定长度单位设置宽高等/h1
div classrem-box
宽14 * 10 140pxbr
高14 * 10 140px
/div
br
h1vh,vw 屏幕可见区域的高度宽度的1%/h1
div classvhvw-box
宽屏幕宽度的50%br
高屏幕高度的50%
/div
/body
/html!DOCTYPE html
html langZh-cn
head
meta charsetUTF-8
title恭贺新春/title
/head
style typetext/css mediascreen
html{
font-size: 14px;
}
.em,
.em .em-son,
.em .em-son .em-grandson {
font-size: 1.2em;
}
.rem,
.rem .rem-son,
.rem .rem-son .rem-grandson {
font-size: 1.2rem;
}
.rem-box {
background: #d60b3b;
width:10rem;
height: 10rem;
color: #fff;
text-align: center;
line-height:5rem;
}
.vhvw-box {
background: #d60b3b;
width:50vw;
height: 50vh;
color: #fff;
text-align: center;
line-height:25vh;
}
/style
body
h1em 继承父元素的字体大小来变大或变小多层嵌套字体变化/h1
div classem
字体大小 1.2 * 14父元素body 16px
div classem-son
字体大小 1.2 * 16(父元素em) 20px
div classem-grandson
字体大小 1.2 * 20(父元素em-son) 24px
/div
/div
/div
br
h1rem 继承根节点元素的字体大小来变大或变小多层嵌套字体不变化/h1
div classrem
字体大小 1.2 * 14根节点html 16px
div classrem-son
字体大小 1.2 * 14根节点html 16px
div classrem-grandson
字体大小 1.2 * 14根节点html 16px
/div
/div
/div
br
h1rem 也可作为固定长度单位设置宽高等/h1
div classrem-box
宽14 * 10 140pxbr
高14 * 10 140px
/div
br
h1vh,vw 屏幕可见区域的高度宽度的1%/h1
div classvhvw-box
宽屏幕宽度的50%br
高屏幕高度的50%
/div
/body
/html
