• <strike id="2k0e4"></strike>
    <ul id="2k0e4"><tbody id="2k0e4"></tbody></ul>
  • <th id="2k0e4"><menu id="2k0e4"></menu></th>
  • Front-end development: what is the difference between units px, rem, em, vh, vw in CSS

    front-end development
    front-end development

    the

    px

    px is the abbreviation of pixel, a relative length unit, and a basic unit commonly used in web design. Pixel px is relative to the screen resolution of the monitor

    the

    em

    em is a relative unit of length. Relative to the font size of the text within the current object (the reference is the font-size of the parent element)

    If the font size of the current parent element is not set, it will be relative to the browser’s default font size

    Features:

    1. The value of em is not fixed;

    2. em will inherit the font size of the parent element

    the

    rem

    rem is a relative unit added by CSS3, and rem is a length unit calculated relative to the font size (font-size) of the HTML root element

    If you do not set the font size of html, it will use the default font size of the browser, usually 16px

    html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */
    
    body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */

    /*A basic font size of 62.5% is defined in the root element (that is, 10px. Setting this value is mainly convenient for calculation. If it is not set, it will be based on “16px”)*/

    The advantage is that you only need to set the size of the root directory to adjust the proportion of the entire page

    rem compatibility: rem is already supported in all browsers except IE8 and earlier

    The difference between em and rem:

    rem is the font size relative to the root element (html), while em is the font size relative to its parent element

    Rules for using both:

    • If this property is measured according to its font-size, use em
    • Rem is used for all other attributes

    A conversion tool for px, em, rem units is provided here: http://pxtoem.com/

    Front-end development: what is the difference between units px, rem, em, vh, vw in CSS

    the

    vw, vh

    The four units of vw, vh, vmax, and vmin are based on the viewport

    vw is relative to the width of the viewport (viewport), and the length is equal to 1/100 of the viewport width

    If the width of the browser is 200px, then 1vw is equal to 2px (200px/100)

    vh is relative to the height of the viewport, and the length is equal to 1/100 of the height of the viewport

    If the height of the browser is 500px, then 1vh is equal to 5px (500px/100)

    vmin and vmax are the minimum or maximum relative to the height and width of the viewport

    /*
    If the height of the browser is 300px and the width is 500px, then 1vmin is 3px, and 1vmax is 5px; if the height of the browser is 800px, and the width is 1080px, then 1vmin is also 8px, and 1vmax is also 10.8px
    */

    the

    Other units:

    % (percentage)

    Generally speaking, relative to the parent element

    1. For ordinary positioning elements, it is the parent element we understand

    2. For position: absolute; elements are relative to the positioned parent element

    3. For position: fixed; elements are relative to ViewPort (visual window)

    the

    vm

    css3 new units, relative to the viewport’s width or height, whichever is smaller

    The smallest of them is divided into 100 units of vm

    For example: browser height 900px, width 1200px, take the minimum browser height, 1 vm = 900px/100 = 9 px

    Disadvantages: poor compatibility

    the


    common problem:

    1. If you use em to set the text size, what should you pay attention to?

    Pay attention to the font size of the parent element, because the em is set according to the size of the parent element.

    For example, it is also 1.5em, if the parent element is 20, then 1.5em is 30px. If the parent element is 30px, 1.5em is 45px (especially in multiple div nesting)

    2. In what scenarios are pc pt ch generally used?

    These are basically not used in our web design, and will be useful in typesetting

    3. How to make 1rem=10px

    Just set HTML{font-size: 62.5%;}

    4. If the parent element does not specify a height, what is the percentage height of the child element?

    It will follow the actual height of the child element, and setting the percentage will have no effect

    the

    the

    About us:

    Infocode Lanchang Information Technology Co., Ltd. has successfully provided high-quality services for many Fortune 500 companies and other famous brands in the world. It is your reliable Internet development provider.

    Serving customers throughout Beijing, Shanghai, Hangzhou, Shenzhen, Guangzhou, Tianjin, Qingdao, Nanjing, Ningbo, Suzhou, Wuxi, Xiamen, Chongqing, Xi’an and other large and medium-sized cities and regions Provide you with: H5 development, small program development, H5 outsourcing, WeChat development, H5 mall development, small program mall development, website development outsourcing, H5 game development, small program development outsourcing, Small program design, APP development outsourcing, UI design, SEO optimization, SEO outsourcing, video post-production and other high-quality services

    What are the main functions of video and TV applet development?



    請輸入姓名或昵稱
    如果您有任何疑問、需要更多信息或希望與我們建立合作請留言
    =
    (0)
    Infocode藍暢Infocode藍暢
    上一篇 2022年7月17日 下午11:57
    下一篇 2023年8月16日 下午10:36

    相關文章內容推薦

    主站蜘蛛池模板: 国产成人无码精品久久久久免费| 亚洲精品人成无码中文毛片 | 无码国模国产在线观看| 亚洲AV日韩AV高潮无码专区| 亚洲人AV在线无码影院观看| 国产aⅴ无码专区亚洲av| 亚洲av永久无码天堂网| 无码毛片视频一区二区本码| 日韩精品中文字幕无码专区| 99精品国产在热久久无码| 久久久精品人妻无码专区不卡| 亚洲中文字幕无码一去台湾| 最新中文字幕AV无码不卡| 人妻在线无码一区二区三区| 人妻少妇伦在线无码专区视频| 人妻无码aⅴ不卡中文字幕| JAVA性无码HD中文| 日韩免费无码视频一区二区三区| 久久天堂av综合色无码专区| 精品多人p群无码| 无码伊人66久久大杳蕉网站谷歌| 国产精品无码无卡无需播放器| 国产AV无码专区亚洲AV蜜芽| 亚洲精品无码中文久久字幕| 免费看成人AA片无码视频羞羞网 | 91精品国产综合久久四虎久久无码一级 | 蕾丝av无码专区在线观看| 无码人妻一区二区三区一| 日韩午夜福利无码专区a| 亚洲中文字幕无码久久综合网| 狠狠爱无码一区二区三区| 无码视频一区二区三区| HEYZO无码中文字幕人妻| 精品国产性色无码AV网站| 大胆日本无码裸体日本动漫| 精品久久久无码人妻中文字幕豆芽| 亚洲日韩中文字幕无码一区| 亚洲国产AV无码一区二区三区 | 无码一区二区三区免费视频| 色欲AV永久无码精品无码| 国产乱人伦中文无无码视频试看 |