CSS-单位(px、em、ex、rem、%、ch、vw、wh、vmin、vmax)

单位 描述
px 屏幕显示的最小单位
em 元素font-size的倍数
ex 英文字母小x的高度
rem root em 相对于根元素font-size的大小
ch 相对于0的宽度
vw 相对于当前视口宽的x%倍 viewport width
vh 相对于当前视口高的y%倍 viewport height
vmax vw和vh中最大的
vmin vw和vh中最小的

注:
em如果当前元素有设置font-size,那么用从父类继承来的font-size

  • rem的使用

<html>

<head>
    <title>CSS-单位title>
    <style>
    div {
    /**相对于根元素html的font-size设置**/
        width: 30rem;
        height: 30rem;
        background-color: #ccc;
        color: #fff;
        font-size:0.6rem;
    }

    @media screen and (max-width:768px) {
        html {
            font-size: 20px;
        }
    }

    @media screen and (min-width:768px) {
        html {
            font-size: 15px;
        }
    }
    style>
head>

<body>
    <div>天气晴朗,风和日丽div>
body>

html>
  • em的使用

<html>

<head>
    <title>CSS-单位title>
    <style>
    p{
    	font-size:14px;
        /*首行缩进,两个字*/
    	text-indent:2em;
    }
    style>
head>

<body>

    <p>真是好天气,房前屋后的花都开了p>
body>

html>
  • vw和vh的使用

<html>

<head>
    <title>CSS-单位title>
    <style>
    .vh-vw {
        background-color: red;
        /**vh vw单位相对于当前视口的高度和宽度**/
        width: 10vw;
        height: 5vh;
        transition: width ease 2s, height ease 2s;
    }
    style>
head>

<body>

    <div class="vh-vw">div>
body>

html>

你可能感兴趣的:(CSS)