動態 REM

Sam-Pig發表於2018-05-25
REM

手機（iPad也不行）專用的自適應方案

1. 什麼是 REM

2. REM 和 EM 的區別是什麼

REM和EM的區別.png

如果chrome的預設最小字型為12px（一般就是這樣），那麼不管你怎麼在CSS上設定，也不能改變字型最小值。

3. 手機端方案的特點

1. 所有手機顯示的介面都是一樣的，只是大小不同
2. 1 rem == html font-size == viewport width
複製程式碼

4. 使用 JS 動態調整 REM

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>
複製程式碼

5. REM 可以與其他單位同時存在

 font-size: 16px;
 border: 1px solid red;
 width: 0.5rem;
複製程式碼

6. 在 SCSS 裡使用 PX2REM

  • npm config set registry https://registry.npm.taobao.org/
  • touch ~/.bashrc
  • echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
  • source ~/.bashrc
  • npm i -g node-sass
  • mkdir ~/Desktop/scss-demo
  • cd ~/Desktop/scss-demo
  • mkdir scss css
  • touch scss/style.scss
  • start scss/style.scss
  • node-sass -wr scss -o css

編輯 scss 檔案就會自動得到 css 檔案

在 scss 檔案裡新增

@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;
}
複製程式碼

即可實現 px 自動變 rem

為什麼你學不好 LESS/SASS/Webpack

  1. 你不會命令列，你非要用 Windows
  2. 你不會英語（有些內容可以看中文翻譯）
  3. 你不會看文件（很重要的能力）

相關文章