第十七天笔记，移动端

视口

布局视口：layout viewport 默认为980像素

视觉视口：visual viewport固定大小跟屏幕大小一致

理想视口：现代网页需要将layout viewport设置成visual viewport等大小，方便进行网页制作,需要手动添加meta视口标签通知浏览器操作

<meta name="viewport"      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

dpi、ppi介绍：

像素：像素是指有一个数字序列所表示的图像中的一个最小单位，你可以把像素理解成图像中一个个不可再分割的最小染色点即可。

什么是分辨率:可以细分为显示分辨率、图像分辨率、打印分辨率等 显示分辨率：显示分辨率是指显示器所能显示的像素点的个数，是指整个显示器所有可视面积上的水平像素和垂直像素的数量。

PPI ：Pixels Per Inch，是指图像分辨率，也叫像素密度，表示每英寸的所包含的像素点数量。（1英寸=2.54厘米）。

DPI:Dots Per Inch，是指打印分辨率，也叫打印精度，表示每英寸所能打印的点数。

像素密度： 所以dpi或ppi统称像素密度(pixel per inch)：即屏幕每英寸所占的物理像素点 PPI=像素数量/物理尺寸（英寸数）

屏幕尺寸： 屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸： iphone4 3.5英寸 iphone5 4英寸 iphone6 4.7英寸 iphone6 plus 5.5英寸 iphoneX 5.8英寸

设备像素比dpr介绍：

设备像素比dpr = 物理像素 / 逻辑像素(px)

绝大部分拿到的设计图的大小 750px/640px 针对性对dpr进行获取： ----- 如果设计图为640px 或者 750px 选取dpr 2 ----- 如果设计图为大于750px 选取dpr为 3

媒体查询

语法规范

- 用 @media开头 注意@符号 - mediatype 媒体类型 - 关键字 and not - media feature 媒体特性必须有小括号包含 @media mediatype and|not|only (media feature) { CSS-Code; }

mediatype 查询类型

all 所有设备 - print 用于打印机和打印浏览 - screen 用于电脑屏幕，平板电脑，智能手机

关键字

- and：可以将多个媒体特性连接到一起，相当于“且”的意思。 - not：排除某个媒体类型，相当于“非”的意思，可以省略。 - only：指定某个特定的媒体类型，可以省略。

媒体特性

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

书写语法：

从大到小或从小到大

@media screen and (max-width: 960px){} @media screen and (max-width: 768px){} @media screen and (max-width: 550px){} @media screen and (max-width: 320px){}

em和rem的特点

em: 一个相对单位，1em等于当前元素或者父元素的font-size值。 rem：一个相对单位rem的特性 ，1rem等于根元素的font-size值。 vw/vh:把屏幕分为100分，1vw等于屏幕的宽度的1%。

vw:1vw=视口宽度的百分之一

1vw=3.75px

26.67vw=100px

针对于750px的手机:

html{

font-size:26.67vw

}

针对于640px的手机：

html{

font-size:31.25vw

}

p:nth-of-type(1){

选择类型是p标签的第一个

}

一般情况下，在ul li中使用nth:child();有不同类型的元素使用p:nth-of-type()。