通過js動態設置根元素的rem方案

zhangfaliang 發布于2019-08-30 13:14 / 1173人閱讀

摘要：方案二獲取元素判斷是屏幕旋轉還是設置的，隨著的改變而改變。以上兩種方案均為通過動態設置的根元素的的值來達到響應式的效果。原文鏈接通過動態設置根元素的方案

rem目前是響應式開發移動端一個很重要也是常用的一個元素，但是在網上看的各種文章都會超級懵逼。所以我在下面給出兩個方案，也列舉出使用方法，讓大家一目了然。前提是設計稿以750為準。其中測試的設計稿中標注此div的width:750px;height:200px;

方案一：

設計稿中標注此div的width:750px;height:200px;
換算為rem,即為width:18.75rem,height:5rem;
此時 1rem = 40px;將設計稿標注的寬高除以40即可得到rem的值。


    此時在iPhone6上測試，width:375px，也即width:100%。

方案二：

設計稿中標注此div的width:750px;height:200px;
換算為rem,即為width:37.5rem,height:10rem;
此時 1rem = 20px;將設計稿標注的寬高除以20即可得到rem的值。


    test

以上兩種方案均為通過js動態設置html的根元素的font-size的值來達到響應式的效果。

最后一個為手淘的方案：

本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。
原文鏈接：通過js動態設置根元素的rem方案

GPU云服務器云服務器 js動態rem js 設置元素的顏色通過js和元素賦值 js 動態增加元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115400.html

通過js動態設置根元素的rem方案

摘要：方案二獲取元素判斷是屏幕旋轉還是設置的，隨著的改變而改變。以上兩種方案均為通過動態設置的根元素的的值來達到響應式的效果。原文鏈接通過動態設置根元素的方案 rem目前是響應式開發移動端一個很重要也是常用的一個元素，但是在網上看的各種文章都會超級懵逼。所以我在下面給出兩個方案，也列舉出使用方法，讓大家一目了然。前提是設計稿以750為準。其中測試的設計稿中標注此div的width:750px...

Juven 2019-08-21 14:53 評論0 收藏0
再談移動端適配和點5像素的由來

摘要：再談移動端適配百分比解決方案的缺點在我們的項目中大量的使用百分比來解決頁面在寬度上的自適應，其實在高度上并沒有很好的自適應。前言這篇文章的內容如題目一樣，主要分為兩個部分，談談業內主流的移動端適配解決方案點5像素的由來和實現方法建議在讀這篇文章的時候先讀下這篇文章《高清屏概念解析與檢測設備像素比的方法_20161005》，因為這些文章涉及的很多概念在這篇文章中都會提到。 ...

lordharrd 2019-08-20 11:31 評論0 收藏0
移動端網頁怎么做？

摘要：移動端網頁最大的特點是什么自適應不同尺寸的屏幕高大上的叫法響應式知道了自適應網頁怎么做豈不是能很好解決問題了那么自適應網頁怎么做呢網上關于這方面的文章有很多，我簡單的整理一下。移動端網頁最大的特點是什么？自適應不同尺寸的屏幕！高大上的叫法:響應式！知道了自適應網頁怎么做豈不是能很好解決問題了？那么自適應網頁怎么做呢？網上關于這方面的文章有很多，我簡單的整理一下。一、 HTML設置 ...

luoyibu 2019-08-20 18:34 評論0 收藏0