day17响应式和媒体查询

一.响应式

响应式布局：

可以根据页面的尺寸来实现不同的页面效果

好处:

比较灵的展示页面 坏处:响应式布局非常复杂 注意事项:响应式布局通常只针对于移动端,pc端很少使用

二.媒体查询

  1.媒体查询的定义

  用来检测设备（屏幕），检测完毕后，会根据不同的设备做不同的布局。 一般常用屏幕的宽度来做检测。

  max:最大的范围不超过多少 左边

  min:最小范围不低于多少 右边

@media screen and (max-width:600px){ 
        样式 
        body{ 
                background-color:red 
        } 
}

  2.媒体查询通常改变的属性

   display font-size width background-xxxx

  3.检测横屏属性

@media screen and (orientation:landscape) {  
        body {  
                background-color: yellow;  
        }  
}

  4.检测竖屏属性

@media screen and (orientation:portrait) { 
        body { 
                background-color: red; 
        } 
}

三.移动端

可以方便移动的设备都统称之为移动端，比如：手机、平板、手表等 a) iphone4========320*480 b) iphone5========320*568 c) iphone678======375*667 d) iphone678s=====414*736 产生的原因:为了让屏幕显示的像素更多（丰富）,通常2或者3 设备像素比=物理像素(ps量的)/逻辑像素(实际css的大小) 推导 逻辑像素(实际css的大小) = 物理像素(ps量的)/设备像素比

四.单位

em:父元素font-size的倍数

rem:html根标签font-size的倍数