谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
談?wù)劺肑avaScript結(jié)合相對單位rem實現(xiàn)自適應(yīng)布局的簡單而實用的方法
rem是css3新增的一個相對單位，相對的只是HTML根元素，可以只修改根元素字體大小就可以成比例地調(diào)整所有字體大小。我們可以巧妙地利用這一特性，實現(xiàn)頁面自適應(yīng)布局。
demo:https://github.com/XieTongXue/how-to/tree/master/pay-h5
需求：
當我們拿到一張設(shè)計稿，比如UI設(shè)計師設(shè)定的是iPhone6下的750px*1334px，那么我們應(yīng)該如何實現(xiàn)適配iPhone5、iPhone4以及其他不同尺寸的屏幕？
有的伙伴也許想到了媒體查詢，定制多套css樣式。首先，我不否定這樣做能實現(xiàn)，但這樣的工作量還是比較大的，而且代碼量也會很多，不利于性能優(yōu)化。
實現(xiàn)方法：
以下介紹一種用JavaScript結(jié)合相對單位rem實現(xiàn)的方式。
①：在<head>里加上以下代碼（設(shè)置viewpoint縮放為1.0）
?
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">?
②：編寫腳本語言，動態(tài)設(shè)置根元素字體大小，其中designW為設(shè)計稿的寬度，其他值固定。?
<script>(function () {var designW = 750; //設(shè)計稿寬var font_rate = 100;//適配document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";//監(jiān)測窗口大小變化window.addEventListener("orientationchange" in window ? "orientationchange" : "resize", function () {document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";}, false);})(); </script>?
③：以上設(shè)置完成后，就可以根據(jù)設(shè)計稿的像素完成網(wǎng)頁的編寫，假設(shè)設(shè)計稿中的一張img的大小為200px*300px,那么樣式設(shè)置成如下：?
img{width: 2rem; <!--(200/100)rem-->height: 3rem; <!--(300/100)rem--> } 以上三步即可實現(xiàn)頁面的只適應(yīng)布局。（注：對圖片清晰度要求較高）具體應(yīng)用例子可參考本人另外一篇文章：https://blog.csdn.net/fabulous1111/article/details/78598425
運行效果：
iphone 6/7/8展示效果：
iphone5展示效果：
ipad展示效果：
?
更新：
2018-07-11更新如下：
以上方法缺點原因：viewport的設(shè)置和屏幕物理分辨率是按比例而不是相同的. 移動端window對象有個devicePixelRatio屬性, 它表示設(shè)備物理像素和css像素的比例, 在retina屏的iphone手機上, 這個值為2或3, css里寫的1px長度映射到物理像素上就有2px或3px那么長。
影響舉例：假如一個設(shè)備的devicePixelRatio是2，按照以上方法的話，比如在iPhone6下，設(shè)置為寬度為7.5rem時寬度占滿屏幕，如圖：雖然效果其是一樣的，但顯示只有375px，跟設(shè)計稿的750px不一樣，雖然只是簡單的乘除，每次計算的話還是比較麻煩，有沒有什么好的解決辦法？答案是肯定的。
①：刪除設(shè)置viewport的meta
②：添加fixPixelRatio方法動態(tài)設(shè)置viewport
③：為了容易區(qū)分，我們把將設(shè)置font-size的匿名函數(shù)也寫成普通方法，兩個方法如下，具體使用方法請看文章最后的測試代碼。
function fixPixelRatio () {var scale = 1 / window.devicePixelRatio;var meta= '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';document.write(meta);}function displayRem () {var designW = 750; //設(shè)計稿寬var font_rate = 100;//適配document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";//監(jiān)測窗口大小變化window.addEventListener("orientationchange" in window ? "orientationchange" : "resize", function () {document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";}, false);}以上方案測試代碼
新建html文件，復(fù)制代碼過去，保存，瀏覽器打開，切換手機模式查看即可。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{padding: 0;margin: 0;}html, body{width: 100%;height: 100%;}.test{width: 7.5rem;height: 2rem;background: yellowgreen;font-size: 0.28rem;line-height: 2rem;text-align: center;}</style></head><body><div class="test">Only test</div></body><script>// 設(shè)置縮放function fixPixelRatio () {var scale = 1 / window.devicePixelRatio;var meta= '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';document.write(meta);}// 設(shè)置font-sizefunction displayRem () {var designW = 750; //設(shè)計稿寬var font_rate = 100;//適配document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";//監(jiān)測窗口大小變化window.addEventListener("orientationchange" in window ? "orientationchange" : "resize", function () {document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";}, false);}fixPixelRatio()displayRem()</script></html>?
總結(jié)
以上是生活随笔為你收集整理的谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何让办公台式电脑秒变wifi路由器-台
- 下一篇： JavaScript实现字符串转换成驼峰