CSS中的响应式布局【媒体查询】

媒体类型

取值	含义
all	用于所有设备
screen	用于电脑屏幕、平板电脑、手机
print	用于打印机和打印预览
speech	用于屏幕阅读器等发声设备

媒体类型的选项

1. and：并列
2. not：取反
3. min-width、max-width：最小、最大宽
4. orientation:landscape、orientation:portrait：横屏、竖屏

基本结构

1. 浏览器宽度小于920px时，html的font-size值为16px；大于等于920px时，html的font-size值为20px

   <style>
   	html{
   		font-size: 16px;
   	}
   	@media all and (min-width: 920px) {
   		html {
   			font-size: 20px;
   		}
   	}
   </style>
   

2. 浏览器横屏时，html的font-size值为16px；竖屏时，html的font-size值为20px

   <style>
   	html{
   		font-size: 16px;
   	}
   	@media all and (orientation:portrait) {
   		html {
   			font-size: 20px;
   		}
   	}
   </style>
   

3. 直接操作外部样式，浏览器宽度小于920px时，使用common.css；大于等于920px时，使用base.css

   <link rel="stylesheet" href="./base.css" media="all and (min-width: 920px)">
   <link rel="stylesheet" href="./common.css" media="all and (max-width: 920px)">