关于媒体查询
一般样式的改变使用cs3的媒体查询
行为和功能的改变使用JS的媒体查询
1.css 媒体查询
使用css3 @media screen
@media only screen and (device-width:360px) and (device-height:760px) and (-webkit-device-pixel-ratio:3){
//some css...
}
例如：
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
2.js 媒体查询
matchMedia()方法参数可写任何一个CSS@media规则，返回的是新的MediaQueryList对象，该对象有两个属性:
media：查询语句的内容
matches：检查查询结果，返回boolean
还有两个方法
addListener()：添加一个新的监听器函数，查询结果改变时，调用指定回调
removeListener()：删除之前添加的监听器，若不存在则不执行任何操作
var medias = [
window.matchMedia('(max-width:418px)'), //注意添加括号，和CSS一样，也要注意顺序！
window.matchMedia('(max-width:768px)'),
window.matchMedia('(max-width:992px)'),
window.matchMedia('(max-width:1200px)')
]
function mediaMatches() {
if(medias[0].matches){
console.log('<=418'); //do something...
}else if(medias[1].matches){
console.log('>418 & <=768'); // do something...
}else if(medias[2].matches){
console.log('>768 & <=992'); // do something...
}else if(medias[3].matches){
console.log('> 992 & <=1200'); // do something...
}else {
console.log('>1200');
}
}
mediaMatches(); //页面首次加载
for(var i = 0; i < sqls.length; i++){
medias[i].addListener(mediaMatches);
}
为每个MediaQueryList对象添加监听器，每个对象查询结果只有ture和false，当某个对象的查询结果改变时都会调用指定回调函数mediaMatches，这样就可以在每次页面大小改变时执行某些行为
关于viewport 参考https://www.cnblogs.com/2050/p/3877280.html
