亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 145
粉絲 7
評(píng)論 7
訪問(wèn)量 198824
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS自適應(yīng)布局中單位em和rem的區(qū)別以及常見(jiàn)的視口(視窗)單位
李東亞1??3????12?
原創(chuàng)
2009人瀏覽過(guò)

CSS自適應(yīng)布局中常見(jiàn)的em和rem的區(qū)別

1、當(dāng)使用 rem 單位,他們轉(zhuǎn)化為像素大小取決于頁(yè)根元素的字體大小,即 html 元素的字體大小。 根元素字體大小乘以你 rem 值。
2、當(dāng)使用em單位時(shí),像素值將是em值乘以使用em單位的元素的字體大小。em的值是相對(duì)于使用em單位的元素的字體大?。蝗绻?dāng)前元素沒(méi)有設(shè)置字體大小,則em默認(rèn)繼承父級(jí)的字號(hào)大小
3、em 和 rem都是靈活、 可擴(kuò)展的單位,由瀏覽器轉(zhuǎn)換為像素值,單em和rem的參考基準(zhǔn)值不同;
4、em和rem總結(jié):

  • rem 和 em 單位是由瀏覽器基于你的設(shè)計(jì)中的字體大小計(jì)算得到的像素值。
  • em 單位基于使用他們的元素的字體大小。
  • rem 單位基于 html 元素的字體大小。
  • em 單位可能受任何繼承的父元素字體大小影響
  • rem 單位可以從瀏覽器字體設(shè)置中繼承字體大小。
  • 使用 em 單位應(yīng)根據(jù)組件的字體大小而不是根元素的字體大小。
  • 在不需要使用em單位,并且需要根據(jù)瀏覽器的字體大小設(shè)置縮放的情況下使用rem。
  • 使用rem單位,除非你確定你需要 em 單位,包括對(duì)字體大小。
  • 媒體查詢中使用 rem 單位
  • 不要在多列布局中使用 em 或 rem -改用 %。
  • 不要使用 em 或 rem,如果縮放會(huì)不可避免地導(dǎo)致要打破布局元素。

常見(jiàn)的視口單位應(yīng)用

1、視口單位vh、vw常用用于移動(dòng)端布局:通常是把視窗口的寬高按100份等分,單位即vh和vw;vh和vm總是與視口的高度和寬度有關(guān)。
2、與之不同的,vmin和vmax是與當(dāng)下屏幕的寬度和高度的最大值或最小值有關(guān),取決于哪個(gè)更大和更小

代碼練習(xí)

1、代碼

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>rem和em以及視口單位的使用</title>
  8. <style>
  9. /* html在谷歌瀏覽器下默認(rèn)字體字號(hào)為16px */
  10. .one span{
  11. font-size:1.5rem;//等于24px,rem的值是以根元素的字體大小為基準(zhǔn)的
  12. }
  13. .two{
  14. font-size:2rem;//等于32px
  15. }
  16. .two span{
  17. /* 繼承父級(jí)的字體字號(hào)大小 等同與設(shè)置了font-size:2rem;也就是字號(hào)設(shè)置32px*/
  18. width: 10em;//10*32px=320px; em的值是以使用em元素的字體大小為基準(zhǔn)值的,如果元素沒(méi)有設(shè)置字體大小的值則繼承父級(jí)的字體的值
  19. padding:0 1em;;
  20. background-color: #42B983;
  21. }
  22. .three{
  23. font-size:2em;//實(shí)際字號(hào)大小:2*16px=32px;
  24. }
  25. .three span{
  26. font-size:2em;//實(shí)際字號(hào)大小:2*32px=64px;
  27. }
  28. /* 通常設(shè)置字體用rem,設(shè)置寬、高、margin、padding用em;但設(shè)置邊框強(qiáng)烈建議使用px; */
  29. .window{
  30. /* 移動(dòng)端布局通過(guò)視窗的vh和vw來(lái)設(shè)置盒子的自適應(yīng)寬高 */
  31. width: 50vw;
  32. height:50vh;
  33. background-color: lightcyan;
  34. margin:0 auto;
  35. position:relative;
  36. }
  37. .win{
  38. /* 通過(guò)vmin和vmax來(lái)設(shè)置盒子的寬高,通過(guò)vmin設(shè)置寬高,總以最短的邊來(lái)設(shè)置寬高,而vmax則是以最長(zhǎng)的來(lái)設(shè)置寬高 */
  39. width: 25vmax;
  40. height:25vmax;
  41. padding: 1vw 1vh;
  42. background-color: lightgreen;
  43. position: absolute;
  44. top:0;
  45. left: 0;
  46. bottom:0;
  47. right:0;
  48. margin:auto;
  49. }
  50. .w{
  51. width: 15vmin;
  52. height:15vmin;
  53. background-color: red;
  54. position: absolute;
  55. top:0;
  56. left: 0;
  57. bottom:0;
  58. right:0;
  59. margin:auto;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <div class="one">
  65. <span>種業(yè)圈</span>
  66. </div>
  67. <div class="two">
  68. <span>種業(yè)圈</span>
  69. </div>
  70. <div class="three"><span>種業(yè)圈</span></div>
  71. <div class="window">
  72. <div class="win">
  73. <div class="w">
  74. </div>
  75. </div>
  76. </div>
  77. </body>
  78. </html>

2、運(yùn)行結(jié)果:

批改老師:天蓬老師天蓬老師

批改狀態(tài):合格

老師批語(yǔ):
本博文版權(quán)歸博主所有,轉(zhuǎn)載請(qǐng)注明地址!如有侵權(quán)、違法,請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理!
全部評(píng)論 文明上網(wǎng)理性發(fā)言,請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長(zhǎng)!
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

  • 登錄PHP中文網(wǎng),和優(yōu)秀的人一起學(xué)習(xí)!
    全站2000+教程免費(fèi)學(xué)