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

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

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

1、當(dāng)使用 rem 單位，他們轉(zhuǎn)化為像素大小取決于頁根元素的字體大小，即 html 元素的字體大小。 根元素字體大小乘以你 rem 值。
2、當(dāng)使用em單位時(shí)，像素值將是em值乘以使用em單位的元素的字體大小。em的值是相對(duì)于使用em單位的元素的字體大小；如果當(dāng)前元素沒有設(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)致要打破布局元素。

常見的視口單位應(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)值的,如果元素沒有設(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)端布局通過視窗的vh和vw來設(shè)置盒子的自適應(yīng)寬高 */
  31.             width: 50vw;
  32.             height:50vh;
  33.             background-color: lightcyan;
  34.             margin:0 auto;
  35.             position:relative;
  36.         }
  37.         .win{
  38.             /* 通過vmin和vmax來設(shè)置盒子的寬高，通過vmin設(shè)置寬高，總以最短的邊來設(shè)置寬高，而vmax則是以最長的來設(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">
  75.             </div>
  76.         </div>
  77.     </div>
  78. </body>
  79. </html>

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

批改老師：天蓬老師天蓬老師

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

老師批語：
本博文版權(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é)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(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é)