媒体查询+rem实现元素动态变化 ╰+哭是因爲堅強的太久メ 2023-07-03 06:24 2阅读 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
还没有评论，来说两句吧...