rem基础、媒体查询、引入资源（理解）

最新推荐文章于 2022-10-05 17:19:57 发布

辰逸博客

最新推荐文章于 2022-10-05 17:19:57 发布

阅读量328

点赞数 1

分类专栏： css 文章标签： rem基础媒体查询引入资源媒体查询从小到大优势代码分析媒体特性：

本文链接：https://blog.csdn.net/chenyiboke/article/details/103192442

版权

本文介绍了rem单位的基础知识，包括其在网页显示中的应用。深入讲解了媒体查询的概念，如mediatype查询类型、关键字和媒体特性，并通过实例展示了媒体查询如何结合rem实现元素动态大小变化。此外，还探讨了资源引入的语法规范，帮助读者全面理解这些前端开发关键技术。

摘要由CSDN通过智能技术生成

rem基础

rem单位

	rem（root em）是一个相对单位，类似于em，em是父元素字体大小。
    不同的是rem的基准是相对于html元素的字体大小。
    比如，根元素（html） 设置font-size=12px； 非根元素设置width：2rem；则换成px表示就是24px。

命令演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
   
            font-size: 12px;
        }
        div{
   
            font-size: 12px;
            width: 15rem;
            height: 15rem;
            background-color: cornflowerblue;
        }
        p{
   
            /* 1. em 相对于父元素 的字体大小来说 */
            /* width: 10em;
            height: 10em; */
            /* 2. rem 相对于 html元素字体大小来说的 */
            width: 10rem;
            height: 10rem;
            background-color: chartreuse;
            /* 3. rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

网页显示：

在这里插入图片描述

媒体查询

1. 什么是媒体查询

 媒体查询（Media Query） 是CSS3新语法。

    使用 @media查询，可以针对不同的媒体类型定义以不同的样式
    @media 可以针对不同的屏幕尺寸设置不同的样式
    当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
    目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询。

2. 语法规范

@media mediatype and|not|only (media feature) {
        CSS-Code;
    }
    用 @media 开头 注意 @ 符号
    mediatype 媒体类型
    关键字 and not only
    media feature 媒体特性 必须有小括号包含。

最低0.47元/天解锁文章

辰逸博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
rem基础、媒体查询、引入资源（理解）

rem基础rem单位 rem（root em）是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px表示就是24px。命令演示：<!DOCTYPE html><html lang="en">...
复制链接

扫一扫