CSS3 @media 媒体查询配合ZOOM属性快速做自适应网站
其实枫瑞在写这文章的时候比较纠结，这个方式目前还需要嘛？我们在设计网站的时候都会要求适应不同分辨率以及移动端，也好在目前主流前端UI框架都可以帮助我们处理这些事情。但也有一些项目需求不能使用框架需要自己手写，那么大家首先会想到最简单的方式使用百分比布局，media媒体查询方式我们就得对对不同的分辨率针对性的做一些专门的处理。
以下枫瑞会对meia方式，以及js操作zoom，css操作zoom三种方式去说明。zoom方式很适合偷懒，比较我一行代码可以解决的事情为啥要去做两行代码去解决呢？对吧！不偷懒的员工都不是好员工，本文只是介绍一个简单的方式，如果追求质量最好住专门去写一个media。
media:不同分辨率修改样式
举个栗子：现在有一个网页 在1920*1080屏幕下，一个黑色背景的DIV高度为800px;
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.bg{background-color: #000000;height: 800px;}
</style>
</head>
<body class="feng">
<div class="bg"></div>
</body>
</html>
在1366*768屏幕下就不能为800px，我们就可以使用媒体查询方式去修改高度：
@media(max-width:768px)
{
.bg{height:400px}
}关于该方式的具体使用可以看枫瑞的另外一个文章：PC端网站转移动端（自适应）布局不同屏幕展示不同CSS
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.bg{background-color: #000000;height: 800px;}
@media(max-width:1366px)
{
.bg{height: 400px;}
}
</style>
</head>
<body class="feng">
<div class="bg"></div>
</body>
</html>zoom控制网页
zoom属性设置或检索对象的缩放比例，通俗的理解我们在body标签添加一个class标签，在使用媒体查询的方式去修改zoom的值，这样就达到了不同分辨率下不用再去针对性的修改样式
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.bg{background-color: #000000;height: 800px;}
@media(max-width:1366px)
{
.feng{zoom: 50%;}
}
</style>
</head>
<body class="feng">
<div class="bg"></div>
</body>
</html>
js 方式控制zoom
在dody标签中添加onload=”fengrui()”事情在给一个class=”zoom” ，看过枫瑞写的Uni-app的悠悠们应该对onload不陌生了吧（其实我是想说如果不知道就顺便在看我写uni-app文章0）
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.bg{background-color: #000000;height: 800px;}
</style>
<script>
function fengrui()
{
screen.width
screen.height
if (window.screen.width=='1366')
document.body.style.zoom = '67%';
else if (window.screen.width =='1600')
document.body.style.zoom = '80%' ;
}
</script>
</head>
<body onload="fengrui()" class="zoom">
<div class="bg"></div>
</body>
</html>
另外欢迎大家关注枫瑞博客的微信公众号阅读文章的时候方便点击下文中广告和末尾广告给枫瑞一点资金维护网站
