移动WEB开发-rem适配布局

最新推荐文章于 2022-10-08 09:52:16 发布

qq_52822043

最新推荐文章于 2022-10-08 09:52:16 发布

阅读量293

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/qq_52822043/article/details/123495985

版权

1. rem单位

rem是一个相对单位，相对于html元素的字体大小。

em也是一个相对单位，相对于父元素的字体大小。

    <style>
        html {
            font-size: 15px;
        }
        div {
            font-size: 12px;
        }
        p:nth-child(1) {
            /* 1.em是相对于父元素的字体大小，10em = 12px * 10 = 120px */
            width: 10em;
            height: 10em;
            background-color: #000;
        }
        p:last-child {
            /* 2.rem是相对于html元素的字体大小，10rem = 15px * 10 = 150px */
            width: 10rem;
            height: 10rem;
            background-color: pink;

        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <p></p>
    </div>
</body>

2. 媒体查询

@media可以针对不同的屏幕尺寸设置不同的样式

语法：

1）mediatype查询类型

将不同的终端设备划分成不同的类型

2）关键字

将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

3）媒体特性

设置不同的展示风格，必须有小括号包含

    <style>
        /* 媒体查询 */
        /* 可以根据不同的屏幕尺寸改变不同的样式 */
        @media screen and (max-width:1000px) {
            /* 最大宽度为1000px时（500px<屏幕尺寸<=1000px），屏幕为粉色 */
            body {
                background-color: pink;
            }
        }
        @media screen and (max-width:500px) {
            /* 最大宽度为500px时(屏幕尺寸<=500px)，屏幕变为紫色 */
            /* 大于1000px时，没有设置背景颜色 */
            body {
                background-color: purple;
            }
        }
    </style>
</head>
<body>
    
</body>

3. Less基础

Less是一门CSS预处理语言，它扩展了CSS的动态特性。

1）Less变量

@变量名：值；

2）Less嵌套

3）Less运算

qq_52822043

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动WEB开发-rem适配布局

目录1. rem单位2. 媒体查询1）mediatype查询类型2）关键字3）媒体特性3. Less基础1）Less变量2）Less嵌套3）Less运算1. rem单位rem是一个相对单位，相对于html元素的字体大小。em也是一个相对单位，相对于父元素的字体大小。 <style> html { font-size: 15px; } div { ..
复制链接

扫一扫