什么是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.innerWidthdocument.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 數字 值越小越靠前

轉載于:https://www.cnblogs.com/gitnull/p/9532112.html

總結

以上是生活随笔為你收集整理的动态REM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。