height:100vh

最新推荐文章于 2024-08-08 18:54:52 发布
最新推荐文章于 2024-08-08 18:54:52 发布
阅读量4w 收藏 74
点赞数 14
文章标签： css3

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%大的情况




  1. <!DOCTYPE html>
  2. <html lang="Zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>恭贺新春 </title>
  6. </head>
  7. <style type="text/css" media="screen">
  8. html{
  9. font-size: 14px;
  10. }
  11. .em,
  12. .em > .em-son,
  13. .em > .em-son > .em-grandson {
  14. font-size: 1.2em;
  15. }
  16. .rem,
  17. .rem > .rem-son,
  18. .rem > .rem-son > .rem-grandson {
  19. font-size: 1.2rem;
  20. }
  21. .rem-box {
  22. background: #d60b3b;
  23. width: 10rem;
  24. height: 10rem;
  25. color: #fff;
  26. text-align: center;
  27. line-height: 5rem;
  28. }
  29. .vhvw-box {
  30. background: #d60b3b;
  31. width: 50vw;
  32. height: 50vh;
  33. color: #fff;
  34. text-align: center;
  35. line-height: 25vh;
  36. }
  37. </style>
  38. <body>
  39. <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化 </h1>
  40. <div class="em">
  41. 字体大小 1.2 * 14（父元素body） = 16px
  42. <div class="em-son">
  43. 字体大小 1.2 * 16(父元素em) = 20px
  44. <div class="em-grandson">
  45. 字体大小 1.2 * 20(父元素em-son) = 24px
  46. </div>
  47. </div>
  48. </div>
  49. <br>
  50. <h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化 </h1>
  51. <div class="rem">
  52. 字体大小 1.2 * 14（根节点html） = 16px
  53. <div class="rem-son">
  54. 字体大小 1.2 * 14（根节点html） = 16px
  55. <div class="rem-grandson">
  56. 字体大小 1.2 * 14（根节点html） = 16px
  57. </div>
  58. </div>
  59. </div>
  60. <br>
  61. <h1>rem 也可作为固定长度单位设置宽高等 </h1>
  62. <div class="rem-box">
  63. 宽：14 * 10 = 140px <br>
  64. 高：14 * 10 = 140px
  65. </div>
  66. <br>
  67. <h1>vh,vw 屏幕可见区域的高度，宽度的1% </h1>
  68. <div class="vhvw-box">
  69. 宽：屏幕宽度的50% <br>
  70. 高：屏幕高度的50%
  71. </div>
  72. </body>
  73. </html>

  1. <!DOCTYPE html>
  2. <html lang="Zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>恭贺新春 </title>
  6. </head>
  7. <style type="text/css" media="screen">
  8. html{
  9. font-size: 14px;
  10. }
  11. .em,
  12. .em > .em-son,
  13. .em > .em-son > .em-grandson {
  14. font-size: 1.2em;
  15. }
  16. .rem,
  17. .rem > .rem-son,
  18. .rem > .rem-son > .rem-grandson {
  19. font-size: 1.2rem;
  20. }
  21. .rem-box {
  22. background: #d60b3b;
  23. width: 10rem;
  24. height: 10rem;
  25. color: #fff;
  26. text-align: center;
  27. line-height: 5rem;
  28. }
  29. .vhvw-box {
  30. background: #d60b3b;
  31. width: 50vw;
  32. height: 50vh;
  33. color: #fff;
  34. text-align: center;
  35. line-height: 25vh;
  36. }
  37. </style>
  38. <body>
  39. <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化 </h1>
  40. <div class="em">
  41. 字体大小 1.2 * 14（父元素body） = 16px
  42. <div class="em-son">
  43. 字体大小 1.2 * 16(父元素em) = 20px
  44. <div class="em-grandson">
  45. 字体大小 1.2 * 20(父元素em-son) = 24px
  46. </div>
  47. </div>
  48. </div>
  49. <br>
  50. <h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化 </h1>
  51. <div class="rem">
  52. 字体大小 1.2 * 14（根节点html） = 16px
  53. <div class="rem-son">
  54. 字体大小 1.2 * 14（根节点html） = 16px
  55. <div class="rem-grandson">
  56. 字体大小 1.2 * 14（根节点html） = 16px
  57. </div>
  58. </div>
  59. </div>
  60. <br>
  61. <h1>rem 也可作为固定长度单位设置宽高等 </h1>
  62. <div class="rem-box">
  63. 宽：14 * 10 = 140px <br>
  64. 高：14 * 10 = 140px
  65. </div>
  66. <br>
  67. <h1>vh,vw 屏幕可见区域的高度，宽度的1% </h1>
  68. <div class="vhvw-box">
  69. 宽：屏幕宽度的50% <br>
  70. 高：屏幕高度的50%
  71. </div>
  72. </body>
  73. </html>
狗蛋*
关注
html vh和百分比,css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位...
weixin_31689491的博客
06-22 3525
css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位height:100vh一些只能vw, vh才能完成的应用场景：1. 场景之：元素的尺寸限制vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。这类限制的实现，在当下，需...
postcss-100vh-fix:PostCSS插件来修复heightmin-height
03-17
PostCSS 100vh修复 [PostCSS]插件来修复[iOS版的bug]与100vh 。 它可以在Chrome（在某些情况下，仅-webkit-fill-available会导致Chrome出现问题），iOS / iPad / MacOS Safari和[所有其他浏览器]中运行。 纯CSS解决方案，无需JS。 body { /* Footer will be hidden on iOS Safari because of bottom panel */ height : 100 vh ; } body { height : 100 vh ; } /* Avoid Chrome to see Safari hack */ @supports ( -webkit-touch-callout : none) { body { /* The hack for
移动端100vh超出页面出现滚动条问题
最新发布
qq_55139096的博客
08-08 315
当移动端想要占满屏幕时通常会使用100vh,但是在手机端访问网站时会发现超出的屏幕宽度并出现了滚动条。这是因为移动浏览器（Chrome和Safari）地址栏有时可见有时隐藏，从而改变了视口的可见大小。当视口高度变化时，这些浏览器没有将。高度没变，但是地址栏那块把内容顶出去了一块）。结果导致：当地址栏可见时，屏幕的底部将被切断，从而破坏了开始时。结局方案2：使用dvh单位(需要考虑兼容性)设置为隐藏了地址栏的浏览器的高度（其实就是。的高度调整为屏幕的可见部分的高度，而是将。然后在需要全屏的页面使用变量。
Height：100vh
NnbNnb的博客
10-26 666
Height：100vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
css3中的width:100vh以及calc(100vh + 10px)
qq_24581629的博客
05-17 4万+
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小， 即window.innerWid
CSS | CSS中height:100vh和height:100%的区别
青春木鱼的博客
06-15 1万+
1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%
height: 100vh
02-24
height: 100vh是CSS中的一个属性，用于设置元素的高度。vh是视口高度的单位，表示相对于视口高度的百分比。 具体来说，100vh表示元素的高度将占据整个视口的高度。无论视口的高度是多少，元素的高度都将等于视口的...
height: 100vh;
06-11
`height: 100vh` 是一种 CSS 样式，其中 `vh` 是 `viewport height` 的缩写，表示视口高度的百分比。具体来说，`1vh` 表示视口高度的1%，因此 `100vh` 表示视口高度的100%。 使用 `height: 100vh` 样式可以将元素的...
display: flex; flex-direction: column; height: 100vh;在小程序中不生效
11-09
height: 100vh;`可能不会生效，这是因为小程序中的组件样式表现与Web有所不同。在小程序中，需要使用`wx:if`或`hidden`属性来控制组件的显示和隐藏，同时需要使用`<view>`标签来包裹需要布局的元素。另外，小程序中...
height:100vh啥意思
10-20
height:100vh是CSS中的一个属性，它的意思是将元素的高度设置为当前屏幕可见高度的100%。这意味着无论屏幕的大小如何，该元素的高度都将等于屏幕的高度。这个属性通常用于创建全屏背景或者占据整个屏幕的元素。除了...
height: 100vh;是什么意思
07-24
`height: 100vh;` 是 CSS 中的一个属性，用于设置一个元素的高度为视口（viewport）高度的百分比。其中，`vh` 表示视口高度的百分比，1vh 等于视口高度的 1%。 例如，如果当前视口的高度为 800 像素，则 `height: ...
在css中 height: 100vh；与height: 100%；有什么区别？
weixin_46300114的博客
03-06 1703
生效，父元素必须具有明确定义的高度，例如固定高度值或相对定位。如果父元素的高度未被明确定义，那么。表示元素的高度将占据视口（浏览器窗口）的高度。无论父元素的高度如何，使用。将使元素占据整个视口的高度，这对于实现全屏或类似效果非常有用。在实际应用中，如果您想让一个元素占据整个视口的高度，可以使用。表示元素的高度将与其父元素的高度相同。如果想让一个元素与其父元素等高，可以使用。在 CSS 中有着不同的含义和应用场景。，前提是父元素具有明确定义的高度。是相对于父元素的高度，而。是相对于视口的高度。
尺寸单位em,rem,vh,vw
前端学习日记
02-12 8762
这几天做demo，看了网上教程有用到尺寸单位vh，vw， 这些单位不是很熟悉，所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照
height:100vh的应用
JiAyInNnNnN123的博客
01-02 546
今天改移动端页面样式的时候因为height:100vh，导致我想超出部分滚动页面的效果没有做出来。就查查这玩意是啥意思。 别人解释的height:100vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高...
关于height:100%和height:100vh的区别
热门推荐
朽木自雕的博客
09-03 9万+
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%，也就是说 height:100vh ==height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
height: calc(100vh - 100px)；
fury的博客
09-30 2748
因此，这段代码的意思是将元素的高度设置为视窗高度减去100像素。这样，元素的高度会根据视窗大小自动调整，并且保留一定的空间（100像素）在顶部或底部。其中，vh是视窗的高度单位，表示相对于视窗高度的百分比，1vh等于视窗高度的1%。而px则是像素单位，表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSS的calc()函数来计算高度值，公式为100vh - 100px。
height:100%和height:100vh的区别
weixin_43550562的博客
10-25 449
vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。
css height 100% 和 100vh 区别
weixin_43814775的博客
02-17 1278
1. height 100% 意思就是，想在这container设置高度！ [有约束] 高度设置成 100% 但是呢这得看 container的父级 body的height是否为100% 还往上看body的父级 html的height是否为100% container - > body - >html [他们的 height 元素都要设置为 100%] <html> <head> <style> html,bod
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值