CSS9:動態 REM-手機專用的自適應方案

joyqi 發布于2019-08-30 15:54 / 1232人閱讀

摘要：一定要強制自己用命令行，強制自己學英語，強制自己看文檔。只有這三條都做了，才有可能成為前端水平的程序員。設計師的設計稿寬度需要統一那么相應得，這時會將自動變成寬度為的情況下這樣就無需在手動換算的值了。

CSS9:動態 REM-手機專用的自適應方案

動態 REM是手機專用,是如何適配所有手機的方案,不是響應式方案,
例如 : taobao.com 是專門的PC端
m.taobao.com 是專門的手機端,如果用電腦短訪問網頁布局就很奇怪
就像用手機訪問pc端沒有自適應的網站一樣

當別人問會不會移動端開發,說會就行了,因為我會了動態REM!手機專用

1.REM是什么

em:一個m的寬度.如果面試官問,就說是一個漢字的寬度.這個單位是相對于font-size的

rem:root em,根元素的font-size.即的font-size.rem是相對于html的font-size的

vh:視口高度,總共100vh
vw:視口寬度,總共100cw
MDN-length

2. 12像素法則

網頁的默認font-size是16px.
chrome瀏覽器默認設置能顯示的最小字體是12px,也就是說如果給css樣式小于12px,那么還會顯示12px.這需要手動設置才行.但瀏覽器用戶一般都不會去設置這個.所以讓字體不要小于12像素,否則chrome瀏覽器沒法顯示

而firefox和safir瀏覽器就沒有這個限制

3. em和rem的區別

對于漢字來說,寬高一樣,所以font-size高度就是1個em的值(M這個字寬高基本一致,且寬度就是一個漢子的寬度.所以叫em)
區別:
em:自己的font-size的值
rem:根元素的font-size

4.動態REM

做響應式之前需要四個設計圖(沒圖不做.因為設計不是前端該做的事,沒有完整最終確定的的設計圖之前,不要寫代碼.):
一個是窄屏,一個是寬屏,一個是ipad,一個是手機端的

不同的屏幕得到不同的樣子算式響應式.

這篇博客不討論響應式.只看手機端怎么做.

4.1手機端出現的問題:

pc端只需要選一個布局,然后定寬就可以了,

但是手機端,手機太多.

各種寬度像素都有很多.沒有辦法做響應式,
解決方法:

使用百分比:例如,寬度5%,40%,讓它始終自適應.

整體縮放:做一個圖,然后遇到寬度不一樣的情況就整體縮放

4.2手機上百分比布局,固定寬度布局缺點

百分比布局缺點:寬度容易確定,因為可以和父容器作比較,是相對于父容器的.但是高度很難確定,比如高度寫成20%,沒有寫過,想做一個寬高1:2的div,沒法做,有很強的不確定性.高度沒有辦法跟寬度做任何的配合

如果想寫出下面的設計

假設固定寬度為320px,固定寬高后出現的問題:

即如果手機寬度變化,那么就不會適應屏幕變化

如果居中,兩側就會變大,固定寬度只能讓別的寬度的手機看到320px寬度的樣子

想要的效果是所有元素按比例放大

單位應該相對于寬度,才能很好地還原設計稿
px,em都不行,vw可以,但是vw兼容性太差
所以退而求其次

4.3 最終解決方案

rem依賴的是的font-size,使用js使的font-size依賴pagewidth,那么rem就間接地依賴于頁面的pagewidth

所以引入REM方案

在標簽里加上如下代碼,讓1rem等于頁面寬度


  
  
  動態REM

使用上面代碼,使長度單位相對于頁面寬度定義,從而適應任何不同屏幕尺寸的手機

不管屏幕寬度如何變化,布局總是完美適應屏幕

4.4優化

rem小于1不方便寫
將pageWidth/100,于是就將款入分為100rem,剛才的0.4rem就可以寫成40rem.這樣用起來像vw.但是有一個問題

谷歌瀏覽器字體設置不能小于12px,所以除以100后,html標簽的font-size變成了12px.
解決方法:之縮小10倍即可,10rem為頁面總寬度

rem和其他長度單位混用

因為border這種小的單位,讓它固定就可以,不需要縮放,因為1px縮放,border還顯示1px.如果5px縮放,不顯示2.5px,值顯示2px,px不會變成小數.
font-size也不必縮放,將所有屏幕的手機font-size設置成一樣大小,顯示不影響美觀

5.使用sass自動將設計稿的px轉換為rem

px需要算,很麻煩。假如設計師給的設計稿是只有640px的寬度的一個設計稿，里面有一個div是256px×128px，那么寬度的rem就是256/64010rem，高度的rem就是128/64010rem，全部換成rem之后，所有的手機頁面才能自動縮放。這樣的缺點顯而易見，難道自己要一點點算rem的值？

有沒有什么辦法可以將px轉換為rem并交給程序來做？有，sass。

一定要強制自己用命令行，強制自己學英語，強制自己看文檔。
只有這三條都做了，才有可能成為前端水平20%的程序員。
現在前端很多工具沒有窗口界面，我已經裝了linu虛擬機，安裝軟件等工具包只需要一條命令，很方便。

5.1 安裝并使用sass

使用npm安裝（linux環境）
因為國內特殊的網絡環境，不能直接安裝，所以需要先設置國內的鏡像，設置淘寶源
npm config set registry https://registry.npm.taobao.org/
touch ~/.bashrc
設置之后還沒用，因為node-sass會下載亞馬遜上的一個資源，所以要設置一下，從淘寶上下載資源，不要去國外下載
echo "export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"" >> ~/.bashrc
source ~/.bashrc

全局安裝
npm i -g node-sass
如果使用windows，那么一定會報錯，我也不知道為什么，所以推薦從現在開始，編程使用linux或者mac，安裝工具就一句命令行的事情。如果放不下windows，就在Windows上裝虛擬機，在安裝深度linux，deepin或ubantu都可以。

安裝好之后，接下來做個示例：
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
start scss/style.scss
在scss文件夾里創建style.scss接下來：

node-sass -wr scss -o css
使用上面的命令監聽scss文件夾。開始實驗：

這時候編輯 scss 文件就會自動得到 css 文件

例如，在style.scss里寫

html{
  color:red;
  p{
  color:blue;
 }
}

在css里沒有這樣的語法
這時觀察css文件

自動轉化成符合正確語法的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;
}

那么相應得，css這時會將px自動變成em（寬度為640px的情況下）

.child {
  width: 5rem;
  height: 2.5rem;
  margin: 0.625rem 0.625rem;
  border: 1px solid red;
  float: left;
  font-size: 1.2em; }

這樣就無需在手動換算rem的值了。

rem寬度自適應動態rem js動態rem aspx適應手機

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116843.html

CSS9:動態 REM-手機專用的自適應方案

摘要：一定要強制自己用命令行，強制自己學英語，強制自己看文檔。只有這三條都做了，才有可能成為前端水平的程序員。設計師的設計稿寬度需要統一那么相應得，這時會將自動變成寬度為的情況下這樣就無需在手動換算的值了。 CSS9:動態 REM-手機專用的自適應方案動態 REM是手機專用,是如何適配所有手機的方案,不是響應式方案,例如 : taobao.com 是專門的PC端m.taobao.com 是...

ityouknow 2019-08-02 10:52 評論0 收藏0
前端面試題（移動適配，閉包，this，HTTP狀態碼，排序思路，頁面加載，數組去重）

摘要：例如狀態碼表示響應成功。答狀態碼表示服務器已接受請求，但尚未處理。狀態碼表示發送的請求需要有通過認證的認證信息。狀態碼表示服務器端在執行請求時發生了錯誤。響應報文也是由三部分組成狀態碼響應報頭和響應報文。前端面試題（移動適配，閉包，this，HTTP狀態嗎，排序思路，頁面加載，數組去重） 1 請寫出一個符合 W3C 規范的 HTML 文件請寫出一個符合 W3C 規范的 HTML 文...

chaos_G 2019-08-22 18:40 評論0 收藏0
真的,移動端尺寸自適應與dpr無關

摘要：做移動端自適應時可能很多人都對自適應和之間的關系產生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。做移動端自適應時可能很多人都對自適應和dpr之間的關系產生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...

omgdog 2019-08-22 18:19 評論0 收藏0
真的,移動端尺寸自適應與dpr無關

摘要：做移動端自適應時可能很多人都對自適應和之間的關系產生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。做移動端自適應時可能很多人都對自適應和dpr之間的關系產生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...

617035918 2019-08-02 10:46 評論0 收藏0