布局中常用的單位的優缺點

這裡是看文章後總結的一些點，具體可檢視原文

css畫素：為web開發者提供，在css中使用的乙個抽象單位

物理畫素：只與裝置的硬體密度有關，任何裝置的物理畫素都是固定的

px看似是固定值，但在不同的裝置上展現的卻是不同的畫素。

pc端： 1 css畫素 = 物理畫素／解析度 = 750 ／ 980 =0.76 px

iphone6：1 css畫素 = 物理畫素 ／解析度 = 750 ／ 375 = 2 px

所以我們無法使用px一套樣式適應多個裝置

有人可能會想，我們可以通過**查詢寫多套樣式啊

css中的子元素中的百分比（%）到底是誰的百分比？

top、bottom的百分比是相對於(預設定位)父元素的height

left、right的百分比是相對於(預設定位)父元素的width

padding、margin不論是垂直方向或者是水平方向，都相對於直接父元素的width

border-radius、translate、background-size的百分比，則是相對於自身的width

百分比單位布局應用

使用padding-top來填充高度,來實現寬高自適應

計算困難，如果我們要定義乙個元素的寬度和高度，按照設計稿，必須換算成百分比單位。

百分比布局不全是相對于父元素的單位,而且父元素的單位也不是唯一的

只相對於根元素(html)的font-size大小來決定

rem的用法

當html元素的font-size為12px時 ,1rem = 12px;

一、自行換算rem

比如給定的視覺稿為750px（物理畫素），如果我們要將所有的布局單位都用rem來表示，一種比較笨的辦法就是對所有的height和width等元素，乘以相應的比例，現將視覺稿換算成rem單位，然後乙個個的用rem來表示。

如果我們需要實現裝置的自適應,只需要使用js監聽裝置的大小,動態改變font-size即可.

//網上還有很多這樣的**,可以自行查詢

function refreshrem() 
win.addeventlistener('resize', refreshrem);

表示的是從px轉化為rem。

px2rem的原理也很簡單，重點在於預處理以px為單位的css檔案，處理後將所有的px變成rem單位。可以通過兩種方式來實現：

1） webpack loader的形式：

npm install px2rem-loader

module.exports = , , 

}]}]
}

npm install postcss-loader

var px2rem = require('postcss-px2rem');

module.exports = ]},
postcss: function() )];
}}

在響應式布局中，必須通過js來動態控制根元素font-size的大小。或者是必須引入相關外掛程式

也就是說css樣式和js**有一定的耦合性。且必須將改變font-size的**放在css樣式之前。

vw：相對於視口的寬度。視口被均分為100單位的vw

vh：相對於視口的高度。視口被均分為100單位的vh

vmax：相對於視口的寬度或高度中較大的那個。

vmin：相對於視口的寬度或高度中較小的那個。

h1

vw和vh的區別是：乙個相對與你的螢幕的寬度來設定，乙個是你螢幕的高度來設定

和百分比的區別：百分比相對于父元素設定。而vw和vh相對於視窗來設定

vw單位換算

比如對於iphone6/7 375*667的解析度，那麼px可以通過如下方式換算成vw：

0.266~ vw = (1/375）*100 vw  = 1px				//這裡小數無限後迴圈用~表示   如0.26666 = 0.26~

1 vw = 1/100*375 = 3.75px

var defaults = ;

Android UI設計 布局中常用的單位

布局中常用的單位有很多種，其中最常用的如下 1.畫素單位 px 此單位不推薦使用 其經常用在 手錶裝置 機頂盒裝置 中 2.適配的單位 dp 舊版使用 dip 推薦使用！優點是 在不同的解析度下 可以顯示幾乎相近的布局內容 缺點 未發現 例如 寬 1080px 的螢幕 其dpi為420，需要一塊螢幕...

css grid布局的優缺點是什麼？

css grid布局的優點 1 固定和靈活的軌道尺寸 2 可以使用行號，名稱或通過定位網格區域將專案放置在網格上的精確位置 3 可以將多個專案放入網格單元格或區域中，它們可以彼此部分重疊。缺點 相容性不太好。相關推薦 css 教程 css grid 網格 布局為css引入了乙個二維網格系統。它是由縱...

響應式布局的優缺點及設定

響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。優點 面對不同解析度裝置靈活性強 能夠快捷解決多裝置顯示適應問題 缺點 相容各種裝置工作量大，效率低下 累贅，會...