當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法

發布時間：2023/12/31 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

談談利用JavaScript結合相對單位rem實現自適應布局的簡單而實用的方法

rem是css3新增的一個相對單位，相對的只是HTML根元素，可以只修改根元素字體大小就可以成比例地調整所有字體大小。我們可以巧妙地利用這一特性，實現頁面自適應布局。

demo:https://github.com/XieTongXue/how-to/tree/master/pay-h5

需求：

當我們拿到一張設計稿，比如UI設計師設定的是iPhone6下的750px*1334px，那么我們應該如何實現適配iPhone5、iPhone4以及其他不同尺寸的屏幕？

有的伙伴也許想到了媒體查詢，定制多套css樣式。首先，我不否定這樣做能實現，但這樣的工作量還是比較大的，而且代碼量也會很多，不利于性能優化。

實現方法：

以下介紹一種用JavaScript結合相對單位rem實現的方式。

①：在<head>里加上以下代碼（設置viewpoint縮放為1.0）

②：編寫腳本語言，動態設置根元素字體大小，其中designW為設計稿的寬度，其他值固定。

③：以上設置完成后，就可以根據設計稿的像素完成網頁的編寫，假設設計稿中的一張img的大小為200px*300px,那么樣式設置成如下：

img{width: 2rem; height: 3rem;  } 以上三步即可實現頁面的只適應布局。（注：對圖片清晰度要求較高）

具體應用例子可參考本人另外一篇文章：https://blog.csdn.net/fabulous1111/article/details/78598425

運行效果：

iphone 6/7/8展示效果：

iphone5展示效果：

ipad展示效果：

更新：

2018-07-11更新如下：

以上方法缺點原因：viewport的設置和屏幕物理分辨率是按比例而不是相同的. 移動端window對象有個devicePixelRatio屬性, 它表示設備物理像素和css像素的比例, 在retina屏的iphone手機上, 這個值為2或3, css里寫的1px長度映射到物理像素上就有2px或3px那么長。

影響舉例：假如一個設備的devicePixelRatio是2，按照以上方法的話，比如在iPhone6下，設置為寬度為7.5rem時寬度占滿屏幕，如圖：雖然效果其是一樣的，但顯示只有375px，跟設計稿的750px不一樣，雖然只是簡單的乘除，每次計算的話還是比較麻煩，有沒有什么好的解決辦法？答案是肯定的。

①：刪除設置viewport的meta

②：添加fixPixelRatio方法動態設置viewport

③：為了容易區分，我們把將設置font-size的匿名函數也寫成普通方法，兩個方法如下，具體使用方法請看文章最后的測試代碼。

以上方案測試代碼

新建html文件，復制代碼過去，保存，瀏覽器打開，切換手機模式查看即可。

<!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>// 設置縮放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);}// 設置font-sizefunction displayRem () {var designW = 750; //設計稿寬var font_rate = 100;//適配document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";//監測窗口大小變化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>

總結

以上是生活随笔為你收集整理的谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：如何让办公台式电脑秒变wifi路由器-台
下一篇： JavaScript实现字符串转换成驼峰