動態REM

什麼是rem？

rem是相對於根元素html字體大小來計算的，即( 1rem = html字體大小 )

rem和em區別？

rem:（root em，根em）根元素的fort-size的大小計算
em：相對長度單位，相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被設置，則相對於瀏覽器的默認字體尺寸。 em 的值並非固定的， em的值會繼承父級元素的字體大小。

rem手機端方案特色？

• 因此手機端顯示界面比例都同樣，只是大小不一樣
• 1 rem==html fort-size ==viewport width
• 在線轉換工具: http://pxtoem.com/

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>

 

REM 能夠與其餘單位同時存在

 font-size: 16px;
 border: 1px solid red;
 width: 0.5rem;

 

在 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

---

屏幕適配佈局問題

響應式佈局

流式佈局+媒體查詢

• 用來解決不一樣寬度的佈局問題，父級寬度不夠的時候，子級節點會「擠下去」
  使用css3，根據屏幕分辨率進行不一樣的樣式應用

優劣：

• 這種佈局通吃pc和移動端，作到精細處，二者的效果都很好，
• 缺點是媒體查詢是有限的，也就是能夠枚舉出來的
• 對設計要求簡單、清晰、複雜的設計稿會直接弄死前端，同時須要多個設計稿
• css3低版本瀏覽器不支持

伸縮佈局

使用的是Flexbox ，有兼容性問題
總體思路：考慮把一個元素變成一個伸縮容器 -->伸縮容器中子元素的排列方式 -->子元素所佔空間

伸縮佈局的屬性：

1 主軸方向 flex-direction:row /row-reverse（右到左）/column/column-reverse(下到上)
2 伸縮項目在主軸的對齊方式 justify-content：flex-start /flex-end/center/space-between/space-around
3 伸縮項目是否換行 flex-wrap：nowrap/wrap
4 換行後對齊方式 align-content:stretch:拉伸/flex-start...sapce-around
5 不換行對齊方式 align-items 默認拉伸 值同上

伸縮項目的屬性:

1 伸縮項目在伸縮容器中所佔的空間 flex 值 數字 比例
2 本身的對齊方式 align -self：start /end/center
3 排列順序 order 數字 值越小越靠前