媒体查询

@media not all and (min-width:1024px) and (max-width:1199px){

body{

background:blue;

}

}

@media screen and (orientation:portrait) {

//竖屏

}

@media screen and (orientation:landscape) {

//横屏

}

媒体查询：

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成

语法：(媒体查询一般放在css代码的后面)

@media 媒体类型 and (表达式){

css代码

}

媒体类型：

all 所有设备

screen 计算机屏幕

projection 用于投影图像，如幻灯片

tv 电视类设备

表达式：监测设备的条件

关键字:

and两侧必须添加空格

not放在媒体类型前面,指的是排除某个设备范围

移动端

视口:禁止用户缩放 1:1比例

从375px的手机 截图用ps去量大小 750px ???

iphone4 应用了一块屏幕 retina屏( 视网膜高清显示屏 )

视网膜高清显示屏 像素点更加密集(画质更加清晰)

分辨率:

ppi : 每英寸所显示的像素点的密度 ppi值越大分辨率越高 ( 苹果 )

dpi : 每英寸所显示像素点的个数. ( 安卓 )

retina屏 比较 普通的显示屏 -> 像素点越来越多

dpr 设备像素比

dpr == 物理像素 / 逻辑像素

物理像素:设备真正所显示的像素( 截图截出来的750px设计图 )

逻辑像素:css中设置的像素

移动端UI设计图:

640px

750px *

根据设计图获取dpr:

如果设计图宽度是640px或者是750px的时候 dpr 为 2

如果设计图大于750px dpr 为 3

'rem'

相对大小,相对于html的font-size值.

默认大小: 1rem == 16px

转rem流程:

ps中量出的大小 / dpr / html中font-size值 == rem;

vw

视口的宽

100vw == 视口宽度的100%

vh

视口的高

100vh == 视口高度的100%

vmin

eg: 10vmin

比较视口的宽高,谁小就是谁的 10%

vmax

eg: 10vmin

比较视口的宽高,谁大就是谁的 10%

1: 因为我们为了方便计算所有html中font-size值为 100px

2: 因为我们要让html中font-size值随着视口宽度发生改变 所有选取vw

100px == ?vw

第一种情况:

设计图为640px情况下:

考虑dpr为 2

640px / 2 == 320px

100vw == 320px

1vw == 3.2px

?vw == 100px

31.25vw == 100px

html{

font-size:31.25vw;

/*

31.25vw == 100px

1rem == 100px

*/

}

第二种情况:

设计图为750px情况;

考虑dpr 为 2

750px / 2 == 375px

100vw == 375px

1vw == 3.75px

?vw == 100px

26.67vw == 100px

html{

font-size:26.67vw;

/*

26.67vw == 100px

1rem == 100px

*/

}

总结:

如果设计图 640px

html{

font-size:31.25vw;

}

如果设计图 750px

html{

font-size:26.67vw

}

例如:

从设计图量出 216px;

考虑dpr 为 2

216px / 2 == 108px;

108px == 1.08rem