移动WEB开发之rem布局

最新推荐文章于 2024-09-28 19:02:04 发布

有一只僵尸在你的草坪上

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量111

点赞数 1

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_47406138/article/details/108049874

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.rem基础

在这里插入图片描述

****em ****

 <style>
        div {
            font-size: 12px;
        }

        p {
            width: 10em;
            height: 10em;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>

这里是引用

rem

 html {
            font-size: 14px;
        }

        div {
            font-size: 12px;
        }

        p {
            /* width: 10em;
            height: 10em; */
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>

在这里插入图片描述
rem的优点：可以通过修改html文字的大小来控制页面元素的大小

2.媒体查询（Media Query）

可以根据不同屏幕尺寸设置不同样式

语法规范

@media mediatype and|not|only(media feature){
CSS-Code;

mediatype查询类型
关键字
媒体特性

 <style>
        /* 屏幕尺寸<=800px 变为粉色*/
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }

        /* 屏幕尺寸<=500px 变为紫色*/
        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
    </style>

 <style>
        /* 屏幕小于540px时 背景颜色变为蓝色 */
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }

        /* 540<=x<=969 背景变为绿色 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) { */
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }

        /* 屏幕大于等于970时 背景变为红色 */
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
    </style>

    <style>
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }

        @media screen and (min-width:640px) {
            html {
                font-size: 100px;
            }
        }

        div {
            height: 1rem;
            background-color: pink;
            color: #fff;
            font-size: .5rem;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="top">大肘子</div>
</body>