媒体查询+rem实现元素动态变化

╰+哭是因爲堅強的太久メ 2023-07-03 06:24 32阅读 0赞

## 1.概念 ##

首先了解几个概念  
(1)\*\*px:\*\*为绝对单位，设置了几像素就是几个像素，缩小屏幕宽度仍然是该像素  
(2)**em**:相对父级的font-size的大小来说，比如有下列代码

<style> div{ 
    		font-size:12px
    	}
    	p{ 
    		width: 10rem;
    		height:10.5rem;
    	}
    </style>
    <body>
    	<div>
    		<p></p>
    	</div>
    </body>

那么p的宽度为120px，高度为126px  
（3）**rem**:相对于html元素的font-size来说的，比如有以下代码：

<style> html{ 
    		font-size: 14px;
    	}
    	h1 { 
    		width: 10rem;
    		height: 10rem;
    	}
    	p{ 
    		width: .5rem;
    		height: 1rem;
    	}
    </style>
    <body>
    	<h1></h1>
    	<p></p>
    	
    </body>

那么p的宽度为7px，高度为14px,h1的宽度为140px，高度为140px

**媒体查询**：见 [https://blog.csdn.net/rj2017211811/article/details/104158134][https_blog.csdn.net_rj2017211811_article_details_104158134]

## 2.例子 ##

假设有一个div，

<body>
    	<div class="top">
            购物车
    	</div>
    </body>

当屏幕宽度>540px的时候,该div的高度是一个高度，字体是一个字体，  
当屏幕宽度>320px并且<540px的时候,该div的高度是另外一个高度，字体是另外一个字体，  
当屏幕宽度<320px的时候,该div的高度是另外一个高度，字体是另外一个字体  
css代码

<style type="text/css">
            @media screen and (max-width: 320px){ 
                html { 
                    font-size: 30px;
                }
            }
            @media screen and (min-width: 320px){ 
                html{ 
                    font-size: 50px;
                }
            }
            @media screen and (min-width: 540px){ 
                html { 
                    font-size: 100px;
                }
            }
            .top{ 
                height: 1rem;
                font-size: .5rem;
                background-color: green;
                color: #ffffff;
                text-align: center;
                line-height: 1rem;
            }
        </style>

[https_blog.csdn.net_rj2017211811_article_details_104158134]: https://blog.csdn.net/rj2017211811/article/details/104158134

发表评论取消回复

表情：

评论列表（有 0 条评论，32人围观）

还没有评论，来说两句吧...

相关阅读

相关媒体查询

记篇 html { font-size: 50px; } // 我们此次定义的划分的份数为 15 @no: 15; ...

深藏阁楼爱情的钟/ 2024年04月19日 11:04/ 0 赞/ 132 阅读

相关媒体查询配合rem使用（HTML+CSS学习笔记二十一）

媒体查询 + rem 计算方法 > 计算rem方法： > 结合媒体查询 -> 随着设备的改变更改html font-size的值。 > > 媒体查询

我会带着你远行/ 2023年10月06日 15:26/ 0 赞/ 81 阅读

相关媒体查询+rem实现元素动态变化

1.概念首先了解几个概念 (1)\\px:\\为绝对单位，设置了几像素就是几个像素，缩小屏幕宽度仍然是该像素 (2)em:相对父级的font-size的大小来说

╰+哭是因爲堅強的太久メ/ 2023年07月03日 06:24/ 0 赞/ 33 阅读

相关媒体查询

1.定义 > 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 > @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计>响

怼烎@/ 2023年07月03日 06:24/ 0 赞/ 95 阅读

相关媒体查询+rem+flexible.js实现移动端适配

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQy

灰太狼/ 2023年02月16日 12:13/ 0 赞/ 90 阅读

相关 rem适配布局+媒体查询+Less的使用

rem适配布局 rem基础 rem单位媒体查询Media Query 语法规范媒体类型mediatype

本是古典何须时尚/ 2023年01月16日 06:41/ 0 赞/ 197 阅读

相关媒体查询

@media mediatype and|not|only (media feature) { CSS-Code; } 参数说明

￡神魔★判官ぃ/ 2023年01月10日 13:28/ 0 赞/ 219 阅读

相关移动端适配rem知识点及媒体查询

基础 rem(root em)是一个相对单位，基准是html元素字体大小； em也是一个相对单位，基准是父级元素的字体大小优点：可以通过更改页面中html字体大小

深碍√TFBOYSˉ_/ 2022年12月18日 04:57/ 0 赞/ 186 阅读

相关媒体查询

学习目标：学会根据游览器大小的变化而变化 -------------------- 学习内容：学会媒体查询媒体查询@media ![在这里插入图片

刺骨的言语ヽ痛彻心扉/ 2022年11月06日 03:59/ 0 赞/ 366 阅读

相关媒体查询

定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面

我会带着你远行/ 2022年05月09日 04:48/ 0 赞/ 425 阅读