71-响应式布局

响应式布局

• 概念：核心为媒体查询技术，检测屏幕的不同宽度变化，适应不同的css样式代码

  • 媒体：访问网页的设备
  • 查询：css代码的运行环境，通过不同的设备信息进行检测

• 实现：

  • 原生媒体查询实现响应式布局
  • bootstrap实现响应式布局

原生媒体查询实现响应式布局

• 媒体类型：

值	设备类型
All	所有设备，默认值
Print	打印设备
Screen	电脑显示器，彩色屏幕、手机屏幕
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打印机
Handhelp	便携设备
Projection	投影设备
Speech	语音或者音频合成器
Tv	电视类型设备
Try	电传打印机或者终端

• 媒体特性：

值	描述
width	网页显示区域完全等于设备的宽度
height	网页显示区域完全等于设备的高度
max-width	网页显示区域小于等于设备宽度
max-height	网页显示区域小于等于设备高度
min-width	网页显示区域大于等于设备的宽度
min-height	网页显示区域大于等于设备的高度
orientation	portrait (竖屏模式) \ landscape (横屏模式)

• and：表示并且的关键字，连接媒体类型和媒体特性

• 写法：

  @media 媒体类型 and (媒体特性){    
  css选择器{        
      css属性名1:css属性值1;        
      css属性名2:css属性值2;        
      css属性名3:css属性值3;      
      .....    
     }
   }
   
   示例：
   /* 在彩色屏幕中          
   1200-900px，显示黄色      
   900-500px  显示红色，     
   500-0px，显示黑色  
   */
   
   @media screen and (max-width:1200px){   
   .box{       
       background-color: yellow;  
       }
   }
   
   @media screen and (max-width:900px){   
   .box{       
       background-color: red;  
       }
   }
   
   @media screen and (max-width:500px){   
   .box{        
       background-color: black;    
       }
   }
  

常用设备尺寸

名称	尺寸	设备
特大	1200px ≤ x	普通电脑屏幕
大	992px ≤ x < 1200px	小型电脑屏幕，大pad
中	768px ≤ x < 992px	ipad pad pro
小	450x ≤ x < 768px	大屏手机、pad 迷你
特小	x < 450px	普通手机屏幕