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

前言

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

媒体查询

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

媒体类型

• 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

vw/vh

vw表示视口的宽度，1vw表示视口宽度的1%；