zoukankan      html  css  js  c++  java
  • rem布局

     

     

    em单位

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

     小demo

    div {
        font-size: 12px;
    }
    
    div p {
         10em;
        height: 10em;
        background: pink;
    }
    <div>
        <p>dd</p>
    </div>
     p的大小是基于父盒子的字体大小来说的 

    rem单位

    小demo

    html {
        font-size: 14px;
    }
    div {
        font-size: 12px;
    }
    
    div p {
         10rem;
        height: 10rem;
        background: pink;
    }
    <div>
        <p>rem是基于HTML标签的字体大小的单位</p>
    </div>
      p的大小是 10* 14 =140

     

     

     

     

     

     

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

     

     

     

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

    /*1 小于600 背景是绿色*/
    @media screen and (max- 599px) {
        body {
            background-color: green;
        }
    }
    /*2 大于600 小于1000是红色*/
    /*@media screen and (min- 600px) and (max- 999px) {*/
    /*body {*/
    /*background: red;*/
    /*}*/
    /*}*/
    /*2 简写*/
    @media screen and (min- 600px) {
        body {
            background: red;
        }
    }
    
    /*3 大于100是紫色*/
    @media screen and (min- 1000px){
        body {
            background: purple;
        }
    
    }
    /*4 媒体查询的and 不能省略*/
    /*5 数值后面的单位px不能省略*/

     

     

     

     

    <!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- 320px)">
        <link rel="stylesheet" href="style640.css" media="screen and (min- 640px)">
    </head>
    <body>
    <div>盒子1</div>
    <div>盒子2</div>
    </body>
    </html>

     

     

     

     

     

  • 相关阅读:
    let jsp embedded dynamic language python ruby groovy
    The C Book — Table of Contents
    E4X 维基百科,自由的百科全书
    github for windows
    C File I/O Tutorial Cprogramming.com
    RequireJS入门(一)
    微信技术总监分享架构设计 下载频道 CSDN.NET
    C语言编程程序的内存布局
    Niocchi Java crawl library implementing synchronous I/O multiplexing
    Michael Barr « Embedded Gurus – Experts on Embedded Software
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14380019.html
Copyright © 2011-2022 走看看