网页的缩放，适配以及移动的适配！
来源：https://blog.csdn.net/wuyufa1994/article/details/85143693javascript
从布局出发：宽度自适应，经常使用百分比的方式。因为父级元素采用百分比的布局方式，随着屏幕的拉伸，它的宽度会无限的拉伸。而子元素因为采用了浮动，那么它们的位置也会固定在两端。该宽度自适应在新的时代有了新的方法，随着弹性布局的普及，它常常被flex或者box这样的伸缩性布局方式替代，css
1.remhtml
rem属性指的是相对于根元素设置某个元素的字体大小。它同时也能够用做为设置高度等一系列能够用px来标注的单位。java
浏览器的默认字体高度通常为16px，即1em:16px，可是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者经常将页面跟节点字体设为62.5%，好比选择用rem控制字体时，先须要设置根节点html的字体大小，由于浏览器默认字体大小16px*62.5%=10px。jquery
html {web
font-size: 10px;bootstrap
}浏览器
div {框架
font-size: 1rem;iphone
height: 2rem;
width: 3rem;
border: .1rem solid #000;
}
采用以上写法，div继承到了html节点的font-size，为自己定义了一系列样式属性，此时1em计算为10px，即根节点的font-size值。因此，这时div的高度就是20px，宽度是30px，边框是1px，字体大小则是10px；一旦有了这样的方法，咱们天然能够根据不一样的屏幕宽度设置不一样的根节点字体大小。假设咱们如今设计的标准是iphone5s，iphone5系列的屏幕分辨率是640。为了统一规范，咱们将iphone5 分辨率下的根元素font-size设置为100px;
html {
font-size: 100px;
}
/*
数据计算公式 640/100 = device-width / x 能够设置其余设备根元素字体大小
ihone5: 640 ： 100
iphone6: 750 : 117
iphone6s: 1240 : 194
*/
var deviceWidth = window.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
接下来咱们能够根据根元素的字体大小用rem设置各类属性的相对值。固然，若是是移动设备，屏幕会有一个上下限制，咱们能够控制分辨率在某个范围内，超过了该范围，咱们就再也不增长根元素的字体大小了.
通常的状况下，你是不须要考虑屏幕动态地拉伸和收缩。固然，假如用户开启了转屏设置，在网页加载以后改变了屏幕的宽度，那么咱们就要考虑这个问题了。解决此问题也很简单，监听屏幕的变化就能够作到动态切换元素样式。
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
window.onresize = function(){
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
};
//为了提升性能，让代码开起来更加完美，能够为它加上节流阀函数:
window.onresize = _.debounce(function() {
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
}, 50);
2.css--media query(媒体查询)
运用css新属性media query 特性也能够实现咱们上说到过的布局样式。为尺寸设置根元素字体大小，但灵活性不高，取每一个设备的精确值须要本身去计算，因此只能取范围值。考虑设备屏幕众多，分辨率也良莠不齐，把每一种机型的css代码写出来是不太可能的。
经常使用于pc端的适配，好比常见的1024，1366等分辨率。此种自适应布局通常经常使用在兼容PC和手机设备，因为屏幕跨度很大，界面的元素以及远远不是改改大小所能知足的。这时候须要从新设计整界面的布局和排版了，与rem相比，最明显的特色是直接能够改变布局。
许多css框架常常用到这样的多端解决方案，著名的bootstrap就是采用此种方式进行栅格布局的。
@media screen and (device-width: 640px) { /*iphone4/iphon5*/
html {
font-size: 100px;
}
}
@media screen and (device-width: 750px) { /*iphone6*/
html {
font-size: 117.188px;
}
}
@media screen and (device-width: 1240px) { /*iphone6s*/
html {
font-size: 194.063px;
}
}
小结
1.若是只作pc端，那么静态布局（定宽度）是最好的选择；
2.若是作移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.若是pc，移动要兼容，并且要求很高那么响应式布局仍是最好的选择，前提是设计根据不一样的高宽作不一样的设计，响应式根据媒体查询作不一样的布局。
场景1：1920的设计稿，须要在1024，1366等等主流分辨率下适配（采用网页等比例缩放）
常见的缩放有zoom和transform:scale两种，二者都具有缩放的功能，他们的区别以下
1.zoom支持的值类型有：
百分比值：zoom:50%，表示缩小到原来的一半。
数值：zoom:0.5，表示缩小到原来的一半。
normal关键字：zoom:normal等同于zoom:1.
注意，虽然Chrome/Safari浏览器支持了zoom属性，可是，其实zoom并非标准属性。
二、CSS3 transform下的scale
而transform下的scale就不同了，是明明确确写入规范的。从IE9+到其余现代浏览器都支持。语法为：transform: scale(<x> [<y>]). 同时有scaleX, scaleY专门的x, y方向的控制。
和zoom不一样，scale并不支持百分比值和normal关键字，只能是数值。并且，还能是负数，没错，负数。而zoom不能是负值！
三、zoom和scale更深层次的差别
控制缩放的值不同。zoom更全面，可是不能是负数，只能等比例控制；而scale虽然只能是数值，可是能负数，能够只控制1个维度。
zoom的缩放是相对于左上角的；而scale默认是居中缩放；
zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
zoom和scale对元素的渲染计算方法可能有差别（以下截图示意）。
对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。
而后，还有一个肉眼看不见却更重要的差别，渲染的性能差别明显。
因为zoom的缩放会改变元素的真实空间大小，会影响其它的元素，在文档流中zoom加在任意一个元素上都会引发一整个页面的从新渲染，而scale只是在当前的元素上重绘。即scale变化时其本来的尺寸是不变的，但zoom则会改变其原来尺寸。
咱们要实现元素的缩放效果，可使用CSS3 animation, 可是存在这样一种状况，就是元素本来就使用了一些transform属性进行，此时，再使用scale进行animation缩放，就会覆盖原来的值，事情就会变得麻烦。
在移动端，你们也可使用zoom进行一些静态内容的控制，能够避免为了scale而占有translate, rotate, skew等公用的transform属性。
须要注意的是，Chrome等浏览器下，zoom/scale不要同时使用，由于，缩放效果会累加。
下面是不改变总体布局时进行的笔记本适配。将网页进行总体缩放。效果至关于ctrl+鼠标滚动j进行网页的缩放，只不过这是经过计算比例，而后在具体的分辨率下显示缩放后的网页（无需手动缩放），业务场景应该是但愿内容一屏显示，在不一样的分辨率下不但愿出现滚动条。
function zoomhtml(){
var wid=$(window).width(),len;
if(wid<1600){
len=wid/1600;
$("html").css("zoom",len);
$("html").css({"-moz-transform":"scale("+len+")"},{"-moz-transform-origin":"0 0"});
}
};
zoomhtml();
场景2 ：常常会遇到一些需求是页面铺满整个屏幕，即：屏幕有多高页面就有多高不能出现滚动条。
可用以下的方式解决
1.设置页面viewport初始缩放为1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2.页面结构以下；其中content为目标缩放容器
<body class="container">
<div class="main_content content">
</div>
</body>
3.js脚本以下，须要放在页面最底部
<script>
var clientWidth = parent.document.documentElement.clientWidth;
var clientHeight = parent.document.documentElement.clientHeight;
resize(clientWidth, clientHeight);
window.addEventListener('resize', resize(clientWidth, clientHeight));
function resize(docWidth, docHeight) {
var docScale = docHeight / docWidth,
designWidth = 375, designHeight = 667, els = document.querySelectorAll('.content'),
scale = docWidth / designWidth,
scaleX = docWidth / designWidth,
scaleY = docHeight / designHeight;
convertArray(els).forEach(function (el) {
extend(el.style, {
width: designWidth + 'px',
height: (docScale * designWidth) + 'px',
position: 'absolute',
top: 0,
left: 0,
transformOrigin: '0 0',
webkitTransformOrigin: '0 0',
transform: 'scale(' + scale + ')',
webkitTransform: 'scale(' + scale + ')',
overflow: 'auto',
webkitOverflowScrolling: 'touch'
});
});
}
function convertArray(arrayLike) {
return Array.prototype.slice.call(arrayLike, 0);
}
function extend() {
var args = Array.prototype.slice.call(arguments, 0);
return args.reduce(function (prev, now) {
for (var key in now) {
if (now.hasOwnProperty && now.hasOwnProperty(key)) {
prev[key] = now[key];
}
}
return prev;
});
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>测试页面</title>
<style type="text/css">
div {
width: 600px;
text-align: center;
font-size: 4em;
color: #333;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function() {
var r = document.body.offsetWidth / window.screen.availWidth;
$(document.body).css("-webkit-transform","scale(" + r + ")");
});
$(window).resize(function() {
var r = document.body.offsetWidth / window.screen.availWidth;
$(document.body).css("-webkit-transform","scale(" + r + ")");
});
</script>
</head>
<body>
<div>改变窗口大小试试，你会发现什么？</div>
</body>
</html>
最后：
但愿你看了文章有所收获，欢迎交流！若有错误，欢迎指正！
————————————————
版权声明：本文为CSDN博主「yufawu」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处连接及本声明。
原文连接：https://blog.csdn.net/wuyufa1994/article/details/85143693
从布局出发：宽度自适应，经常使用百分比的方式。因为父级元素采用百分比的布局方式，随着屏幕的拉伸，它的宽度会无限的拉伸。而子元素因为采用了浮动，那么它们的位置也会固定在两端。该宽度自适应在新的时代有了新的方法，随着弹性布局的普及，它常常被flex或者box这样的伸缩性布局方式替代，
1.rem
rem属性指的是相对于根元素设置某个元素的字体大小。它同时也能够用做为设置高度等一系列能够用px来标注的单位。
浏览器的默认字体高度通常为16px，即1em:16px，可是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者经常将页面跟节点字体设为62.5%，好比选择用rem控制字体时，先须要设置根节点html的字体大小，由于浏览器默认字体大小16px*62.5%=10px。
div {
font-size: 1rem;
height: 2rem;
width: 3rem;
border: .1rem solid #000;
}
接下来咱们能够根据根元素的字体大小用rem设置各类属性的相对值。固然，若是是移动设备，屏幕会有一个上下限制，咱们能够控制分辨率在某个范围内，超过了该范围，咱们就再也不增长根元素的字体大小了.
通常的状况下，你是不须要考虑屏幕动态地拉伸和收缩。固然，假如用户开启了转屏设置，在网页加载以后改变了屏幕的宽度，那么咱们就要考虑这个问题了。解决此问题也很简单，监听屏幕的变化就能够作到动态切换元素样式。
window.onresize = function(){
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
};
//为了提升性能，让代码开起来更加完美，能够为它加上节流阀函数:
window.onresize = _.debounce(function() {
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
}, 50);
小结
1.若是只作pc端，那么静态布局（定宽度）是最好的选择；
2.若是作移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.若是pc，移动要兼容，并且要求很高那么响应式布局仍是最好的选择，前提是设计根据不一样的高宽作不一样的设计，响应式根据媒体查询作不一样的布局。
场景1：1920的设计稿，须要在1024，1366等等主流分辨率下适配（采用网页等比例缩放）
常见的缩放有zoom和transform:scale两种，二者都具有缩放的功能，他们的区别以下
1.zoom支持的值类型有：
- 百分比值：
zoom:50%，表示缩小到原来的一半。 - 数值：
zoom:0.5，表示缩小到原来的一半。 - normal关键字：
zoom:normal等同于zoom:1.
注意，虽然Chrome/Safari浏览器支持了zoom属性，可是，其实zoom并非标准属性。
二、CSS3 transform下的scale
而transform下的scale就不同了，是明明确确写入规范的。从IE9+到其余现代浏览器都支持。语法为：transform: scale(<x> [<y>]). 同时有scaleX, scaleY专门的x, y方向的控制。
和zoom不一样，scale并不支持百分比值和normal关键字，只能是数值。并且，还能是负数，没错，负数。而zoom不能是负值！
三、zoom和scale更深层次的差别
控制缩放的值不同。zoom更全面，可是不能是负数，只能等比例控制；而scale虽然只能是数值，可是能负数，能够只控制1个维度。
- zoom的缩放是相对于左上角的；而scale默认是居中缩放；
- zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
- zoom和scale对元素的渲染计算方法可能有差别（以下截图示意）。
- 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。
而后，还有一个肉眼看不见却更重要的差别，渲染的性能差别明显。
因为zoom的缩放会改变元素的真实空间大小，会影响其它的元素，在文档流中zoom加在任意一个元素上都会引发一整个页面的从新渲染，而scale只是在当前的元素上重绘。即scale变化时其本来的尺寸是不变的，但zoom则会改变其原来尺寸。
咱们要实现元素的缩放效果，可使用CSS3 animation, 可是存在这样一种状况，就是元素本来就使用了一些transform属性进行，此时，再使用scale进行animation缩放，就会覆盖原来的值，事情就会变得麻烦。
在移动端，你们也可使用zoom进行一些静态内容的控制，能够避免为了scale而占有translate, rotate, skew等公用的transform属性。
须要注意的是，Chrome等浏览器下，zoom/scale不要同时使用，由于，缩放效果会累加。
下面是不改变总体布局时进行的笔记本适配。将网页进行总体缩放。效果至关于ctrl+鼠标滚动j进行网页的缩放，只不过这是经过计算比例，而后在具体的分辨率下显示缩放后的网页（无需手动缩放），业务场景应该是但愿内容一屏显示，在不一样的分辨率下不但愿出现滚动条。
最后：
但愿你看了文章有所收获，欢迎交流！若有错误，欢迎指正！
来源：https://blog.csdn.net/wuyufa1994/article/details/85143693
- 1. 网页的缩放，适配以及移动的适配！
- 2. 移动端（二）——移动端适配方案之viewport适配、比例缩放适配和百分比适配
- 3. 移动端页面适配
- 4. 移动端 页面适配
- 5. 移动适配
- 6. 移动站适配rel=alternate PC页和H5页适配标注
- 7. 再聊移动端页面的适配
- 8. 关于移动端页面的适配
- 9. 网易移动端适配
- 10. 移动端的适配
- 更多相关文章...
- • Spring Bean的配置及常用属性 - Spring教程
- • IP地址分配（静态分配+动态分配+零配置） - TCP/IP教程
- • 适用于PHP初学者的学习线路和建议
- • 互联网组织的未来：剖析GitHub员工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 网页的缩放，适配以及移动的适配！
- 2. 移动端（二）——移动端适配方案之viewport适配、比例缩放适配和百分比适配
- 3. 移动端页面适配
- 4. 移动端 页面适配
- 5. 移动适配
- 6. 移动站适配rel=alternate PC页和H5页适配标注
- 7. 再聊移动端页面的适配
- 8. 关于移动端页面的适配
- 9. 网易移动端适配
- 10. 移动端的适配