字体种类、修改this方法、meta标签、媒体查询

一、CSS字体

·绝对大小：

　　　px(一个像素)，pt(1/72英寸)，pc(1pc=12pt)

·自适应字体：

　　　em、%(相对于父元素的字体尺寸)

　　　vw、vh(相对于视图窗口的宽高的1%)

　　    vmin(相对于视图窗口的宽高的最小值的1%)、vmax(相对于视图窗口的宽高的最大值的1%)

 　　   rem(相对于根元素html的字体尺寸)

！！！当页面没有设置字体尺寸时，默认100%展示，即100%=16px=1em=1rem=12pt     ！！！

　　为了方便计算rem，一般将根元素的字体尺寸设置为62.5%,使得10px=1rem

 

二、call、apply、bind的区别

　　·都可以用于修改this执行，即上下文，但是bind是返回函数方便之后调用，apply、call则是立即调用。

　　·call、apply的区别：参数的传递形式不同，call需要将参数按顺序一 一传递，apply则是用数组进行传递

　　xxx.call(this,arg1,arg2.....)    xxx.apply(this,[arg1,arg2,...])

！！！当一个object自身没有方法但是其他对象上有时，可通过apply、call调用其他对象上的方法！！！！！

　　·bind最常用的就是创建一个函数，使得此函数不管怎么调用都可以使this保持不变，一般都是将方法从对象中拿出来再调用，此时this会指回原来的对象。

错误调用：

　　var altwrite = document.write;    altwrite("hello");

正确调用：var altwrite = document.write;    alwrite.bind(document)("hello")

 

三、meta标签

　　作用：可以提供页面的元信息，比如页面描述、搜索对应的关键字，meta标签位于head标签内部，不包含任何数据，元数据为名称/值的形式

　　一般包含三个属性  name、content、http-equiv；content是必需的，name则是将conten的内容关联到一个名称，http-equiv则是将content的内容关联到HTTP头部。

　　常用功能：

1.SEO搜索，name--content。使用人们可能会搜索，并准确描述网页上所提供信息的描述性（description）和代表性关键字及短语（keywords）

2.移动设备，name=viewport，content可选的值有：

　　页面宽度width，页面高度height

　　描述移动设备屏幕占比大小initial-scale：1---100%

　　限定页面缩放的最大值maximum-scale、最小值minimum-scale

　　是否允许用户缩放页面 user-scalable（yes--1或no--0）

3.网页相关,http-equiv--content,可选的值

　　charset：编码方式UTF-8

　　X-UA-Compatible:优先使用的浏览器，content写上目标浏览器版本

 

 三、媒体查询media

定义：媒体查询可在不同的条件下使用不同的样式，使页面在不同的终端下显示出不同的渲染效果，搭配响应式字体使用。

使用方法：@media  媒体类型 and （媒体样式）{自定义样式}

媒体类型：screen、all

媒体样式：

　　width（宽度）、height（高度）、device-width（设备宽度）、device-height（设备高度）

　　mix-（大于等于）、min-（小于等于）

　　aspect-ratio（宽高比）、device-aspect-ratio（设备宽高比）

　　orientation（设备方向）：landscape(横屏) | portrait(竖屏)