CSS3 @media 媒体查询配合ZOOM属性快速做自适应网站
本帖最后由 fengrui99 于 2019-7-7 12:14 编辑原文来自枫瑞网：https://www.frbkw.com/1818/
2019.07.07更新
更具大佬提示 检查了一下文章修改2个错误
1.文本中应该是高度为800px，写成宽度了。
2.js中函数名字写错，以及代码中未添加事件
以上是修改内容文章以更新，大意丢失了细节感谢@yqesl1 提醒，另外js也只是多一种思路，一个不同的方式。木有说明一定要使用js哦
其实枫瑞在写这文章的时候比较纠结，这个方式目前还需要嘛？我们在设计网站的时候都会要求适应不同分辨率以及移动端，
也好在目前主流前端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}
}
整理后
<!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“
<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 class="zoom">
<div class="bg"></div>
</body>
</html> 1.描述与代码不一致，一个说是div宽度是800px，代码却是height；函数名字写错onload=”fnegrui()”，运行你的代码肯定一堆bug
2.媒体查询没有写全，window.screen.width=='1366'也不好，现在的屏幕的分辨率类型更多，判断不准确，可以用CSS 3的@media(max-device-width:1366px)之类进行处理
3.媒体查询使用css3即可，看看相关api，没有必要使用JS 本帖最后由 fengrui99 于 2019-7-7 12:15 编辑
yqesl1 发表于 2019-7-6 15:20
1.描述与代码不一致，一个说是div宽度是800px，代码却是height；函数名字写错onload=”fnegrui()”，运行你 ...
哈！老哥 我看下了帖子 高度800px，文字中打错为宽度。另外js也只是提供一个方式，提供媒体查询控制zoom百分比和js去控制。文中确实错别人和细节地方比较多，这是我疏忽。 受教了！谢谢分享 受教了！谢谢分享 老铁发帖 得支持！ 學習了
谢谢分享 谢谢分享，学习了 受教了！谢谢分享
页:
[1]
2