移动Web开发入门(二) -- 媒体查询、em、rem

原创

爱划水de鲸鱼哥 2022-09-20 23:25:48 博主文章分类：前端 ©著作权

文章标签 css 输出设备媒体查询 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者爱划水de鲸鱼哥的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

本文主要记录了媒体查询的基本概念，包含媒体查询的逻辑关系、媒体特征表达式、常用媒体尺寸以及移动端常用单位。

媒体查询

通过查询当前属于哪种设备, 让网页能够在不同的设备下正常渲染显示。

媒体类型

all (所有的设备)；
print (打印设备)；
screen (电脑屏幕,平板电脑,智能手机)；
speech 屏幕阅读器等发声设备中加载;

     	
     	/*  and 表示 && screen 和 (min-width: 900px) 都满足时样式才有效*/
        @media screen and (min-width: 900px){
            body{
                background-color: #fff;
            }
        }

媒体查询的逻辑关系

与 and（&&）；
或 ， (||)；
非 not （！）；
only （在不支持媒体查询的浏览器中不添加样式）；

   @media screen and (min-width: 900px),screen and (max-width: 1200px){
            body{
                background-color: #fff;
            }
        }

注意：或后面要写媒体类型，没写媒体类型默认值为 all

媒体特征表达式

width 输出设备中的页面可见区域宽度;
max-width 输出设备中的页面最大可见区域宽度;
min-width 输出设备中的页面最小可见区域宽度;
-webkit-device-pixel-ratio输出设备的屏幕可见宽度与高度的比率；
-webkit-min-device-pixel-ratio 输出设备的屏幕可见宽度与高度的最小比率；
-webkit-max-device-pixel-ratio 输出设备的屏幕可见宽度与高度的最大比率；
orientation：portrait（竖屏） | landscape（横屏）；

       @media (-webkit-device-pixel-ratio:2){
            body{
                background-color: #fff;
            }
        }

常用媒体尺寸

PC优先

	@media screen and (max-width:1200px){  
	}
	@media screen and (max-width:992px){ 
	}
	@media screen and (max-width:768px) {
	}
	@media screen and (max-width:576px){ 
	}

移动优先

@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {

}

移动端常用单位

px

px绝对长度单位，也就是我们实际开发中最常用的单位。

em

==em是相对长度单位，相对于自身的font-size属性进行计算==；

如果当前元素未设置font-size属性，则从父元素上继承fontsize属性。

	<div>
        <p>em</p>
    </div>

        html{
            font-size: 14px;
        }
        div{
            font-size: 15px;
        }
        p{
            font-size: 20px;
            line-height: 1em;
        }

1em * 20px = 20px 在这里插入图片描述

rem

rem是CSS3新增的一个相对长度单位，相对于根元素（html）的font-size进行计算。

	<div>
        <p>rem</p>
    </div>

        html{
            font-size: 14px;
        }
        div{
            font-size: 15px;
        }
        p{
            font-size: 20px;
            line-height: 1rem;
        }

1rem * 14px = 14px 在这里插入图片描述