移動端適配學習

CSS常用數值單位

一般在我們寫CSS時用到最多數值單位,無非就是 px、em、rem、vh/vw,還有就是百分比(%)。

  • px(像素): 很容易理解,1px 就等屏幕的1像素,是個絕對單位,不會因為其他設置而變化。
  • em : 1em 等於當前元素 font-size 的值,更準確來說,等於一個大寫字母 M 或者一個漢字的寬度)
  • rem : 跟 em 類似,但 1rem 是等於根元素 font-size 的值。
  • vh/vw : 1vh/vw 分別等於是視口寬度的1%和視口高度的1%,很好用的單位,可是兼容性不太好。
  • 百分比 : 也就是占父元素的百分比。

移動端適配方案

  1. 百分比 優點 : 讓所有元素都按站頁面的百分比來計算,這樣不管在PC端或者移動端,頁面整體的比例都是一致的。 缺點 : 寬度不確定,所以高度無法與寬度做任何配合
  2. vh/vw 優點 : 可以根據屏幕的大小來設置,寬度和高度也能相配合 缺點 : 兼容性不好
  3. 動態 rem 優點 : 因為 1rem 等於根元素 font-size 的值,所有可以根據當前頁面的大小來動態設置根元素的 font-size。 缺點 :那麼每當用到 rem 就要計算元素的佔比

更好地使用 rem

首先如何動態設置根元素的 font-size

<script>
var pageWidth = window.innerWidth
document.write(<style>html{font-size:+pageWidth/10 +px;}</style>)
</script>

把這段代碼放在

底部去載入,那麼你的根元素 font-size 就會動態地根據你頁面的寬度來變化。那麼這時 1rem 就等於當前頁面的寬度的十分之一。 這裡有需要注意的,一些瀏覽器例如Chrome,有默認的最小font-size,所以當你使用 rem 的時候需要注意,太小的元素就使用別的單位吧。 那麼,現在問題來了,每次用到 rem 都要去算佔多少比例,相當麻煩,所以應該使用到 sass。

@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640是設計稿的寬度,你要根據設計稿的寬度填寫.
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}


那麼以上是我學習移動端適配(rem方案)的記錄。

推薦閱讀:

TAG:HTML5 | 前端開發 | CSS |