css 响应式布局-媒体查询

在style上添加属性
	media='screen'  屏幕设备上有效
	media='print'	打印机上有效
	media='print,screen'
	media='all' 	所有设备

若是外部css文件
	在link上添加属性
	media='screen'  屏幕设备上有效
	media='print'	打印机上有效
	media='print,screen'
	media='all'

内部css文件引入
	@import url(xx.css) print;
	@import url(xx.css) screen;
	@import url(xx.css) all;

在css代码局部使用
	@media screen and (max-width:npx)  当宽度小于npx时,使用该样式
	{
		样式
	}

逻辑指令
	多个条件同时满足使用and
	media='screen and (min-width:npx)'     当宽度大于npx时,使用该样式
	media='screen and (min-width:npx) and (max-width:n1px)'  当宽度大于npx，小于n1px时,使用该样式
	
	或的逻辑使用‘,’号隔开
	media='screen and (min-width:npx),screen and (max-width:n1px)'  当宽度大于npx或者小于n1px时,使用该样式
	
	非的逻辑使用not
	@media not sreen and (min-width:npx){...}  当设备不大于npx时应用该样式
	
	过滤逻辑使用only
	@media only not sreen and (min-width:npx){...} 当浏览器支持这条语句时,会正常判断,不支持将会忽略
	
	除非您使用not或only运算符,否则媒体类型是可选的,且隐含all类型。
	
优先级
	越下面的优先级越高,当设备超过900时会先匹配第一条,超过1200时会先匹配第二条
	
	@import url(xx.css) screen and(min-width:900px);
	@import url(xx.css) screen and(min-width:1200px);

属性:
	min-width 设备最小宽度大于该属性时应用样式
	max-width  设备最大宽度小于该属性时应用样式
	orientation:landscape;  设备横屏时应用该样式
		@media only screen and (orientation: landscape) {...}

典型断点
	/* 超小型设备（电话，600px 及以下） */
	@media only screen and (max-width: 600px) {...} 
	
	/* 小型设备（纵向平板电脑和大型手机，600 像素及以上） */
	@media only screen and (min-width: 600px) {...} 
	
	/* 中型设备（横向平板电脑，768 像素及以上） */
	@media only screen and (min-width: 768px) {...} 
	
	/* 大型设备（笔记本电脑/台式机，992px 及以上） */
	@media only screen and (min-width: 992px) {...} 
	
	/* 超大型设备（大型笔记本电脑和台式机，1200px 及以上） */
	@media only screen and (min-width: 1200px) {...}

代码示例:
代码css变量使用:

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}