本帖最后由 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;
[Asm] 纯文本查看 复制代码 <!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，我们就可以使用媒体查询方式去修改高度：
[Asm] 纯文本查看 复制代码 @media(max-width:768px)
{
.bg{height:400px}
}
整理后
[Asm] 纯文本查看 复制代码 <!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的值，这样就达到了不同分辨率下不用再去针对性的修改样式
[Asm] 纯文本查看 复制代码 !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“
[Asm] 纯文本查看 复制代码 <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> | 
发表于 2019-6-26 13:53
|
发表于 2019-7-7 12:06
