响应式布局 媒体查询

[Wscats]

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
首先这句代码在移动端开发是基本会出现的，它意思就是：整个网站的宽度让它默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。基本所有常用的浏览器都能设置这句话，IE9也是可以的。比较老的IE6、7和8就需要写另外的兼容。

• width - viewport的宽度 height - viewport的高度
• initial-scale - 初始的缩放比例
• minimum-scale - 允许用户缩放到的最小比例
• maximum-scale - 允许用户缩放到的最大比例
• user-scalable - 用户是否可以手动缩放

媒体查询

<link href="css/wsscat.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/wsscat1.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/wsscat2.css" rel="stylesheet" type="text/css" media="print" />

引入样式都有一个共同的属性media，media就是用来指定特定的媒体类型
如屏幕screen和打印print的样式表，当然还有其他的，比如说TV,handheld等，其中all表示的是支持所有媒体介质

and是一个关键词，还有not,only,all

<!--not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备-->
<link rel="stylesheet" media="not screen and (max-width: 1200px)" href="wsscatTv.css" type="text/css" />

only关键字意思是用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="wsscatOnly.css" type="text/css" />

media中如果没有明确指定类型，那么其默认为all
<link rel="stylesheet" media="(min-width: 481px) and (max-width: 900px)" href="wsscat.css" type="text/css" />
上面这句没有media属性所以默认是all
文字用

[Wscats]

JS动态监听屏幕的宽度，实现网页响应
当我们更改屏幕的宽度的时候，就会动态改变样式

window.addEventListener("resize",function(){
            document.querySelector('body').style.fontSize = document.body.clientWidth/20+'px';
            console.log(document.body.clientWidth);
})