14-媒体查询及单位

媒体查询

media query是CSS3的新语法

• 使用@media 查询，可以针对不同的媒体类型来定义不同的样式。

• 可以针对不同的屏幕尺寸来设置不同的样式

• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

• 目前针对很多苹果手机、android手机、平板等设备都用的到媒体查询。

• 语法规范

  @media  mediatype  and/not/only (media feature){
              CSS-code;
  }

  • 用@media开头，注意@符号

  • mediatype 媒体类型

  • 关键字and/not/only

  • media feature 媒体特征 必须有小括号包含

1、mediatype查询媒体类型

• 将不同的终端设备划分为不同的类型，称为媒体类型。

• all：用于所有设备

• print：用于打印机

• screen：用于电脑屏幕，平板电脑，智能手机等

2、关键字

• 关键字将媒体类型或多个多媒体特征连接到一起做为媒体查询的条件

• and，可以将多个媒体特征连接到一起，相当于“且”的意思

• not，排除某个媒体类型，相当于“非”的意思，可以省略

• only，指定某个特定的媒体类型，可以省略

3、媒体特征

• 每种媒体类型都具有各自不同的特征，根据不同的媒体类型的媒体特性设置不同的展示风格。（注意用小括号包含）

• width：定义输出设备中页面可见区域的宽度

• min-width/max-width：定义输出设备中页面最小/最大的可见区域宽度

案例

• 这句话的意思是：在我们的屏幕上，并且最大的宽度为800px，设置我们想要的样式可以根据不同的屏幕尺寸来改变不同的样式。

• 当屏幕尺寸为800px时，背景变成黄色

• 注意为了防止混乱，媒体查询我们要按照从小到大或从大到小的顺序来写，但是我们最喜欢的是从小到大来写，代码更简洁

@media screen and (max-width:800px){
    body {background-color:yellow;}
}
​
//连接多个媒体特征
@media screen and (max-width:800px) and (min-width:350px){
    body {background-color:yellow;}
}

rem单位

• rem（root em）是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。而em是相对于元素的盒子大小文字而言

• 如根元素（html）设置font-size=12px；非根元素设置width：2rem;则换成px表示24px.

• em相对于父元素/本身的字体大小来说的，

• rem相对于html元素，字体大小来说的（整个页面只有一个html)

• rem的优点就是可以通过HTML里面的文字大小来改变页面中元素的大小来整体控制。

rem适配

• 让一些不能等比例适应的元素，达到当设备尺寸发生改变时，等比例适配当前设备

• 使用媒体查询根据不同的设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体发生改变时元素尺寸也会发生变化，从而达到等比例缩放的适配

rem适配方案实际开发

• 按照设计稿与设备宽度的比例，动态计算并设置html根据标签的font-size大小（媒体查询）

• css中，设计稿元素的宽、高、相对位置等取值，按照同比例换算单位的值。

rem适配方案技术使用

• 方案技术1：less、媒体查询、rem

• 方案技术2：flexible.js rem

• 总结：两种方案现在均存在，方法2更简单

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

• rem单位是跟着html来走到，有了rem页面元素可以设置不同大小尺寸

• 媒体查询可以根据不同的屏幕宽度来修改样式

• 媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

引入资源

• 当样式比较繁多的时候，我们可以针对不同的媒体查询使用不同的stylesheet（样式表）

• 原理：就是直接在link中判断设备的尺寸，然后引入不同的CSS文件

• 语法规范

• <link href="#css文件的位置" rel="stylesheet"  media="mediatype  and/not/only  (media feature)">
  //一个建议：我们媒体查询最好的方法是从小到大（大的能层叠小的）

设计稿标准

1. 通常使用IPhone6作为设计稿标准尺寸

2. 我们在HTML+CSS中使用的是逻辑像素,所以我们在CSS中编写的尺寸是原型图中尺寸的一半

3. 设备像素比(DPR) ＝ 物理像素 / 逻辑像素 iPhone6/7/8 物理像素:750px; iPhone6/7/8 逻辑像素:375px;

em,rem,vw,vh

em

em是一个相对值，而且是一个相对于父元素的值

rem

rem是相对的只是HTML根元素的倍数

vw

相对于视口的宽度。视口被均分为100单位的vw
视口的宽度是200mm，那么h1元素的font-size:8vw 就是16mm

vh

相对于视口的高度。视口被均分为100单位的vh
视口的宽度是200mm，那么h1元素的font-size:8vw 就是16mm

屏幕适配方案(一)

1. 添加 viewport头

    <meta name="viewport" content="width=device-width, initial-scale=1">

1. 用设计稿上的尺寸先除以2，再除以font-size的基准值，得到准确的rem数值

    //获取屏幕宽度
    let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;
    let htmlDom=document.getElementsByTagName(‘html’)[0];
    //设置html的font-size,通常以iPhone6的375px为准，font-size为37.5px
    htmlDom.style.fontSize=htmlWidth/10+’px’;
    window.οnresize=function(){
        let htmlwidth=document.documentElement.clientWidth ||     document.body.clientWidth;
        htmlDom.style.fontSize=htmlWidth/10+’px’;
    }

屏幕适配方案(二) flexible

• 手机淘宝团队出的简洁高效的移动端适配库

• 我们再也不需要写不同屏幕的媒体查询，因为这个文件里面js做好了处理，我们引入就行

• 我们要做的就是确定好当前设备的html文字大小即可以，即设置稿尺寸设置到插件里

1. 不添加viewport

2. 引入JS

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

1. 拿到设计稿除以10，得到font-size基准值, 1rem=75px

2. 设计稿px/ font-size基准值，即可换算为rem(750/75=10rem)

3. 尺寸是直接按照设计稿上写的，不需要除以2

4. 网址：https://gihub.com/amfe/lib-flexible

PX转REM单位插件 for VsCode

插件名称：PX2REM

1. 安装

2. 在文件->首选项->设置:搜索PX2REM，将默认的16px改成75px

3. 重启VSCODE