<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html{
width:20px;
}
@media (min-width: 200px) {
html{
background:red;
}
}
</style>
</head>
<body>
<script>
console.log(screen.width)
console.log(window.innerWidth) //包括滚动条
console.log(window.pageXOffset) //Y
console.log(document.documentElement.clientWidth) //viewport 大小
console.log(document.documentElement.offsetWidth) //整个文档大小
window.onresize=()=>{
console.log(window.innerWidth)
}
window.onclick=(event)=>{
console.log(event.pageX) //相对于页面
console.log(event.screenX) //相对于屏幕
console.log(event.clientX) //相对于浏览器
}
</script>
</body>
</html>
网友评论