2. 程式人生 > >移動端佈局單位

移動端佈局單位

阿新 • • 發佈：2018-12-23

　　移動端裝置種類繁多，需要適配多種情況的響應式佈局來保證美觀的頁面實現，先來解釋容易弄混的多個名詞。

  • PPI

    單位英寸畫素數

  • DPR

    裝置畫素比： 裝置畫素 / CSS畫素(某一方向上)

  • DPI

    Dpi（每平方英寸畫素數目）：影象細節程度的度量

  • 單位：
    　　 - em

    em是相對長度單位。相對於當前物件內文字的font-size(即父元素尺寸)。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

    　　 - rem

    　“font size of the root element (根元素的字型大小)”— W3C官網

    　　也就是說1rem就等於<html>的字型大小，因為網頁<html>的預設字型大小是 16px，所以 1rem=16px 。我在實習的公司前輩教我，用1rem=100px替換設計稿上的內容，不需要複雜的計算轉換就可以將px轉換為rem，從而達到適配的效果。

!function(){
    function a(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/7.2+"px"
}
var b=null;
window.addEventListener("resize"
 
,function(){
    clearTimeout(b),b=setTimeout(a,10)},!1),a()
}(window);

　　我們的設計稿寬為720，我們將瀏覽器可見區域/7.2得到100px的大小，將他賦值給根元素fontSize，他的值也就是1rem的大小。
　　詳細的各種寬高可以看一下
　　
　　 - rpx

微信小程式CSS單位，可以根據螢幕寬度進行自適應

rpx實際上就是系統級的rem（把頁面按比例分割750份,我們就不用手動設定JS改變根元素font-size啦）

1rpx=window.innerWidth/750

　　 - vm 、vh、vmin、vmax

vw：視窗寬度的百分比
vh：視窗高度的百分比
vmin：當前較小的vw和vh
vmax：當前較大的vw和vh

相關推薦

移動端佈局單位

　　移動端裝置種類繁多，需要適配多種情況的響應式佈局來保證美觀的頁面實現，先來解釋容易弄混的多個名詞。 PPI 單位英寸畫素數 DPR 裝置畫素比： 裝置畫素 / CSS畫素(某一方向上) DPI Dpi（每平方英寸畫素數目）：影

移動端佈局-媒體查詢 + rem單位佈局

現在HTML5前端不僅僅侷限於PC端，HTML5前端還可以實現移動端，實現微信等等，傳統的佈局單位px，不能是達到自適應的學校過，那麼移動端佈局有哪些方式呢? 媒體查詢 + rem單位佈局 說道這個佈局，，那麼我們首先得了解什麼是媒體查詢，rem是什麼？ 媒體查詢：媒體

移動端佈局字型單位的選擇之px、rem和em揭祕

       一般我們在pc上主要是流動式佈局，採用的單位一般都是px，由於pc螢幕都是很大的，所以不用過多的擔心字型單位的選擇，但是在移動端呢？那麼這完全相反，由於手機螢幕較小，且各種螢幕尺寸你一不

web頁面常用佈局（pc端佈局和移動端佈局）

web頁面常用佈局（pc端佈局和移動端佈局） 什麼是web佈局呢？ 佈局也可以叫做排版，它指的是把文字和圖片等元素按照我們的意願有機地排列在頁面上，佈局的方式分為兩種： 1、table佈局：通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框

移動端佈局一

首先先了解html中這一句話的含義： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1，user-scalable=no"> &

【移動端佈局】讓圖片保持等比例縮放 （實用）

原文出處：https://www.aliyun.com/jiaocheng/639739.html 摘要： 前端寫頁面佈局時,圖片變形是個很令人頭疼的問題,手機螢幕解析度不一樣,出來的效果就不一樣,下面的程式碼可以解決這些問題,保持圖片在不同解析度下面也可以讓圖片不變形 1、首先不

移動端佈局

一、移動端和pc端佈局的不同1.顯示裝置（螢幕）2.操作（滑鼠、指尖）3.瀏覽器核心:移動端不用考慮ie，但是各種瀏覽器核心（手機自帶）、微信瀏覽器核心4.執行裝置 移動裝置（輕便、迅速、便攜） pc端（體驗）5.網路不同 移動4g（注重速度） pc光纖（注重體驗速度）頁面設定不同：1.Meta標籤設定2.單

最順手最簡單的移動端佈局方案——rem佈局

在實踐中用的最順手最簡單的佈局方案——rem佈局 rem佈局非常簡單，首頁你只需在頁面引入這段原生js程式碼就可以了 (function (doc, win) { var docEl = doc.documentElement, r

運用flex和rem為移動端佈局

flex是對於頁面一個非常重要的樣式，不會用到px來佈局，用rem來代替 rem是根據根文件，也就是html標籤上的字型大小來運算的1rem=16px; 手機端的佈局也很簡單，掌握好flex所有的屬性和rem寫頁面就是一件很輕鬆的事。 flex的知識過多，咱們只

rem自適應移動端佈局

現在的移動終端（手機，pad）螢幕大小各不一樣，為了適應每一種螢幕寬度而設計多款樣式明顯是不科學的，所以就有了自適應佈局的概念。 以前，實現自適應佈局的時候，我使用了CSS3 @media 監測視口寬

如何利用vw+rem進行移動端佈局

前言 因為在公司，只有一個前端，在做移動端佈局的時候。利用px進行佈局,發現，需要進行各種手機的適配。 所以在開發第二版的時候，想著引用lib-flexible庫(即手淘的方案),詢問了上一家公司的同事，會有一些字型和一些詭異的問題。 在無意中，突然一個網

【移動端佈局】拋棄rem，使用vw

你還在用rem彈性佈局嗎？在html檔案頭部放入一大段壓縮過的js程式碼，是不是讓你很難受？來了解下vw吧，能讓你的程式碼更純粹 簡單介紹下rem佈局方案 rem是css中的長度單位，1rem=根元素html的font-size值。當頁面中所有元素都使用re

移動端佈局之REM，以及實際使用總結

1.以rem 為單位，前端切圖，以640尺寸（保證放大的圖片質量）， width,height,padding,marging 等切距離，以320的尺寸，也可以以640的尺寸。 配合以下媒體查詢 html {     font-size: 62.5%;/* 10÷16=62.5% */ } @media o

移動端vw單位適配

一. 專案中配置postcssrc.js，同時安裝好對應的外掛module.exports = { "plugins": { "postcss-import": {}， //解決@import引入路徑問題     "postcss-url": {}, //該外掛

移動端佈局、rem佈局、手淘團隊flexible.js、zoom縮放

記錄我的第一篇部落格    學習前端有一段時間，看部落格一直是自己的學習習慣，今天我也來分享一下，從此以後，開始我的部落格之旅（廢話了幾句），下面進入正題： 移動端適配，對於我來說，一直是一個頭疼的問題；經過長期的掙扎，終於花了一整塊時間去研究了一下rem佈局； 我在網上

移動端字型單位該使用px還是rem?

對於只需要適配少部分手機裝置，解析度對頁面影響不大的，使用px即可，對於需要適配各種移動裝置，使用rem，例如只需要適配iPhone和iPad等解析度差別比較挺大的裝置。rem配置參考，適合視覺稿寬度為640px的：<meta content="width=device

移動端佈局rem如何使用

移動端佈局關鍵是要設定meta標籤： <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-

移動端佈局和pc端寫法

一：移動端準備工作<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-eq

Html5移動端佈局及(rem佈局)頁面自適應佈局詳解（轉）

常見的頁面佈局方式有， 靜態佈局  px佈局 流式佈局（Liquid Layout） 主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用） 自適應佈局（Adaptive Layout） 即建立多個靜態佈局，每個靜態佈局對應一個螢幕解析度範圍 響應式

移動端佈局】拋棄rem，使用vw 【移動端佈局】拋棄rem，使用vw

【移動端佈局】拋棄rem，使用vw 簡單介紹下rem佈局方案 rem是css中的長度單位，1rem=根元素html的font-size值。當頁面中所有元素都使用rem單位時，你只需要改變根元素font-size