rem单位的使用

最新推荐文章于 2022-10-18 16:42:02 发布

城楠_327

最新推荐文章于 2022-10-18 16:42:02 发布

阅读量802

点赞数 1

分类专栏： CSS栏文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_46647170/article/details/117676055

版权

CSS栏专栏收录该内容

10 篇文章 0 订阅

订阅专栏

rem

rem（root em）是一个相对单位，rem是根据html的字体大小来改变样式的大小。

	<style>
        html {
            font-size: 24px;
        }
        div {
            width: 10rem;
            height: 20rem;
            
            background-color: pink;
        }
    </style>

	<body>
	    <div>
	        hello world
	    </div>
	</body>

在这里插入图片描述

优势：传统的em是相对于父元素字体大小进行大小样式改变，但是一个页面里的父元素有很多，父元素的字体大小也不统一，以至于em难以统一改变页面元素大小。而html只有一个，我们在开发移动端项目的时候，可以达到这样的一个效果：以rem为单位，在页面小的时候将html字体变小，在页面大的时候将html字体变大，从而整体修改页面元素的大小，达到页面元素自适应的效果。

那么我们如何根据不同页面大小改变页面元素大小呢？

媒体查询

媒体查询的功能就是监视页面的大小，根据不同的页面大小来改变页面样式。

	@media mediatype and|not|only (media feature){
		样式代码;
	}

mediatype媒体类型：

值	说明
all	所有设备
print	用于打印机或打印预览
screen	用于电脑屏幕、平板、手机等设备

	<style>
        div {
            width: 20rem;
            height: 10rem;
            background-color: pink;
        }
        h1 {
            font-size: 2rem;
        }
        
        /* 在屏幕设备上，并且宽度小于800px时 */
        @media screen and (max-width: 800px) {
            html {
                font-size: 24px;
            }
        }
        
        /* 在屏幕设备上，并且宽度小于500px时 */
        @media screen and (max-width: 500px) {
            html {
                font-size: 12px;
            }
        }
    </style>

<body>
    <h1>这是个盒子</h1>
    <div></div>
</body>

此时页面宽度没有小于等于800px
在这里插入图片描述
当小于800px时：

当小于500px时：
在这里插入图片描述

所以在开发移动端页面是，我们可以使用rem单位搭配媒体查询实现页面元素自适应页面大小。

城楠_327

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
rem单位的使用

remrem（root em）是一个相对单位，rem是根据html的字体大小来改变样式的大小。 <style> html { font-size: 24px; } div { width: 10rem; height: 20rem; background-color: pink; } </sty
复制链接

扫一扫