1分鐘學會移動端rem的使用

来源:https://www.cnblogs.com/didou/archive/2018/03/27/8657761.html
-Advertisement-
Play Games

為什麼要使用rem 移動端設備尺寸五花八門,單純使用px這個單位無法輕易適配,rem就可以為我們解決這個問題! 如何使用rem 1rem預設等於16px,這是因為頁面的預設字體大小就是16px。r 代表rootelement,因此只要修改html的font-size大小,就可以更改1rem的大小! ...


為什麼要使用rem

  移動端設備尺寸五花八門,單純使用px這個單位無法輕易適配,rem就可以為我們解決這個問題!

如何使用rem

  1rem預設等於16px,這是因為頁面的預設字體大小就是16px。r 代表rootelement,因此只要修改html的font-size大小,就可以更改1rem的大小!

叮囑UI設計師

  移動端的設計稿尺寸要做成640*750的!移動端的設計稿尺寸要做成640*750的!移動端的設計稿尺寸要做成640*750的!重要的事情說三遍!(640固定,高度可變)

當拿到圖後

  一般人會人為將設計圖按寬度方向分為若幹份(不固定,好算即可),例如640寬的設計稿,分為20份,640/20 = 32,則32就作為設計稿中rem的單位,1rem就等於32px ,則在設計稿中量到一個寬度為100px的元素,實際項目就是 100/32 rem(就是將設計圖中測量出來的尺寸轉化為rem的值)

  因此,在不同的設備中我們只需要去動態設置html的font-size = 設備寬度 / 20 (20是剛剛你分的份數)

  以下代碼直接在頁面中寫,而且要寫在頁面頂部,js要在頁面打開時立刻執行

  
<script type="text/javascript">
      // 根據屏幕的寬度 來設置 html的 font-size
      // 計算 font-size
      var fontSize = window.screen.availWidth / 20;
      document.querySelector('html').style.fontSize = fontSize + 'px';
     //瀏覽器視窗被調整時執行
      window.onresize = function () {
          // 計算 font-size
          var fontSize = window.screen.availWidth / 20;
          document.querySelector('html').style.fontSize = fontSize + 'px';
      }
  </script>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Vue.js在設計上使用MVVM模式。通過MVVM的模式拆分為視圖和數據兩部分,並將其分離。因此,你只需關心數據即可,DOM的事情Vue會幫你自動搞定。 Vue的生命周期鉤子比較常用的有: created 實例創建完成之後釣魚,此階段完成了數據的觀測等,但尚未掛載,$el還不可用。在需要初始化處理一 ...
  • 一、生命後期 官網的圖片說明: Vue的生命周期總結 二、數據綁定 1、數據綁定語法 【文本插值】 【HTML屬性】 【綁定表達式】 【過濾器】 【指令】 2、計算屬性(computed) 3、表單控制 【表單控制項】 script部分 需要註意的是sel2val的賦值是int數組,可是在選擇值得時候 ...
  • 基本概念 佈局模型 1. 流動模型(Flow) 2. 浮動模型(Float) 3. 層模型(Layer) 流動模型 預設的網頁佈局模式,流動佈局模型有兩個比較典型的特征: 第一,塊級元素都會在所處的包含元素內自上而下按順序垂直延伸分佈,且預設狀態下,會計元素的寬度都為包含元素寬度的 100% ,即塊 ...
  • 圖形變換。 一、畫一片星空 先畫一片canvas.width寬canvas.height高的黑色星空,再畫200個隨機位置,隨機大小,隨機旋轉角度的星星。 window.onload=function(){ var canvas=document.getElementById("canvas"); ...
  • 問題一:不同瀏覽器的標簽預設的外補丁和內補丁不同 問題現象:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin 和padding差異較大。 解決方案:css裡加: 1 *{margin:0;padding:0;} 備註:這個是最常見的也是最易解決的一個瀏覽器相容性問題,幾乎所有的css文件開頭 ...
  • 分享網上的2種辦法: 1-可以在不需要預設填寫的input框中設置 autocomplete="new-password"(已實測,有效) 網上咱沒有找到對其詳細解釋,但是發現163郵箱的登錄註冊是這麼用的, 2-在會自動填充內容在form表單的第一個Input前添加一個隱藏的input type= ...
  • 使用sublime text的less2css插件 步驟: 1.安裝node.js,這個到官網下載即可 2.安裝less,方法:命令行輸入: 3.sublime安裝less2css,方法: 4.配置less2css 5.執行編寫好less文件後 按下ctrl+s 就會在當前目錄下生成同名的css文件 ...
  • 最近在用vue2.x做項目,說實話,項目比較趕不吃力那肯定是假的。這裡順帶吐槽一下二線城市東莞,我之前待的城市。深圳很多新技術打得火熱,東莞還是有點滯後吶。言歸正傳,說說 qs.stringify和JSON.stringify qs可通過npm install qs命令進行安裝,是一個npm倉庫所管 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...