rem布局

转载

mb5fdcaeb38fa57 2021-02-05 22:25:00

文章标签 html css 媒体查询 html标签 scala 文章分类 代码人生

rem布局_scala

rem布局_html_02

rem布局_媒体查询_03

rem布局_css_04

em单位

em是相对于父元素的字体大小来说的

小demo

div {
    font-size: 12px;
}

div p {
    width: 10em;
    height: 10em;
    background: pink;
}
<div>
    <p>dd</p>
</div>

p的大小是基于父盒子的字体大小来说的

rem布局_媒体查询_06

rem单位

小demo

html {
    font-size: 14px;
}
div {
    font-size: 12px;
}

div p {
    width: 10rem;
    height: 10rem;
    background: pink;
}
<div>
    <p>rem是基于HTML标签的字体大小的单位</p>
</div>

p的大小是 10* 14 =140

rem布局_scala_08

rem布局_html标签_09

rem布局_媒体查询_10

rem布局_html_11

rem布局_scala_12

rem布局_媒体查询_13

rem布局_scala_14

@media screen and (max-width: 800px) {
    body {
        background: pink;
    }
}
@media screen and (max-width: 500px) {
    body {
        background: purple;
    }
}
当宽度小于800的时候背景是粉色
当宽度小于500的时候背景是紫色

rem布局_html_15

rem布局_scala_16

rem布局_html标签_17

rem布局_css_18

代码的层叠性从小到大写比较简洁

/*1 小于600 背景是绿色*/
@media screen and (max-width: 599px) {
    body {
        background-color: green;
    }
}
/*2 大于600 小于1000是红色*/
/*@media screen and (min-width: 600px) and (max-width: 999px) {*/
/*body {*/
/*background: red;*/
/*}*/
/*}*/
/*2 简写*/
@media screen and (min-width: 600px) {
    body {
        background: red;
    }
}

/*3 大于100是紫色*/
@media screen and (min-width: 1000px){
    body {
        background: purple;
    }

}
/*4 媒体查询的and 不能省略*/
/*5 数值后面的单位px不能省略*/

rem布局_html标签_19

rem布局_scala_20

rem布局_媒体查询_21

rem布局_css_22

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>引入资源</title>
    <!--先写小的 后写大的-->
    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
</body>
</html>