1. 程式人生 > >移動web開發適配rem

移動web開發適配rem

  • 移動web開發與適配
    常見移動web適配方法:
    PC:

  • 960px / 1000px居中

  • 盒子模型,定高,定寬
  • display:inline-block

    移動web:

  • 定高,寬度百分比

  • flex
  • Media Query(媒體查詢)
  • -
  • rem原理與簡介
    字型單位 - 值根據html根元素大小而定,同樣可以作為寬度,高度等單位
    適配原理 - 將px替換成rem,動態修改html的font-size適配
    相容性 - IOS 6以上和android 2.1以上,基本覆蓋所有流行的手機系統
  • 採用rem適配頁面實戰
    rem進階基礎知識
    1.rem基準值的計算

    2.rem數值計算與構建
    3.rem與scss結合使用
    首先安裝node-sass,在終端輸入命令

npm install  node-sass  -g

編譯sass為css,可在終端輸入命令

node-sass a.scss b.css

a.scss

@function px2rem($px){
    $rem:37.5px;      //  1rem = 37.5px
    @return ($px / $rem) + rem;         //  返回rem
}

.hello{
    width:px2rem(100px);
    height
: px2rem(100px); &.b{ width: px2rem(50px); height: px2rem(50px); } }

b.css

.hello {
  width: 2.66667rem;
  height: 2.66667rem; }
  .hello.b {
    width: 1.33333rem;
    height: 1.33333rem; }