網頁的縮放，適配以及移動的適配！
來源：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. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
- 1. 網頁的縮放，適配以及移動的適配！
- 2. 移動端（二）——移動端適配方案之viewport適配、比例縮放適配和百分比適配
- 3. 移動端頁面適配
- 4. 移動端 頁面適配
- 5. 移動適配
- 6. 移動站適配rel=alternate PC頁和H5頁適配標註
- 7. 再聊移動端頁面的適配
- 8. 關於移動端頁面的適配
- 9. 網易移動端適配
- 10. 移動端的適配