媒体查询
@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;
}
第二种情况:
设计图为750px情况;
考虑dpr 为 2
750px / 2 == 375px
100vw == 375px
1vw == 3.75px
?vw == 100px
26.67vw == 100px
html{
font-size:26.67vw;
}
总结:
如果设计图 640px
html{
font-size:31.25vw;
}
如果设计图 750px
html{
font-size:26.67vw
}
例如:
从设计图量出 216px;
考虑dpr 为 2
216px / 2 == 108px;
108px == 1.08rem