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

最新推荐文章于 2023-10-07 09:24:27 发布

I like study.

最新推荐文章于 2023-10-07 09:24:27 发布

阅读量397

点赞数

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

本文链接：https://blog.csdn.net/rj2017211811/article/details/104158449

版权

Web前端专栏收录该内容

19 篇文章 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

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>

I like study.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
媒体查询+rem实现元素动态变化

1.概念首先了解几个概念(1)**px:**为绝对单位，设置了几像素就是几个像素，缩小屏幕宽度仍然是该像素(2)em:相对父级的font-size的大小来说，比如有下列代码<style> div{ font-size:12px } p{ width: 10rem; height:10.5rem; }</style><body> ...
复制链接

扫一扫