CSS3 @media 查询和 rem像素

最新推荐文章于 2023-12-14 11:44:30 发布

yaoxinsong

最新推荐文章于 2023-12-14 11:44:30 发布

阅读量258

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_23159841/article/details/107640701

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

参考链接：https://www.runoob.com/cssref/css3-pr-mediaquery.html

/** 如果文档宽度小于 300 像素则修改背景颜色(background-color):*/
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

参考链接：https://blog.csdn.net/lvyang251314/article/details/82798858

rem 单位是一个相对大小的长度，它是根据html标签的字体大小来决定长度（浏览器的默认字体大小为16px）。也就是说当html里面的字体越大，rem的长度就越长。

<!DOCTYPE html>
<html lang="zh">
<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></title>
</head>
<style type="text/css">
	html{
		font-size: 16px;
	}
	.box {
		font-size: 1rem;
		width: 10rem;
		height: 100px;
		background-color: blue;
	}
</style>
<body>
		<div class="box">
			ccccc
		</div>
</body>
</html>

如果app页面需要手机和平板都兼容的时候，如果只使用px，可能他在手机端的视觉效果大小刚好，但是平板电脑里面的视觉效果就显得太小了。说白了就是要根据显示屏幕的大小来调整html的字体大小来决定适配rem大小比例

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}