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

時間 2019-11-10

標籤 css9 css 動態 rem 手機專用自適應方案欄目 CSS 简体版

原文原文鏈接

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

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

當別人問會不會移動端開發,說會就好了,由於我會了動態REM!手機專用html

1.REM是什麼

em:一個m的寬度.若是面試官問,就說是一個漢字的寬度.這個單位是相對於font-size的前端

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

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

2. 12像素法則

網頁的默認font-size是16px.
chrome瀏覽器默認設置能顯示的最小字體是12px,也就是說若是給css樣式小於12px,那麼還會顯示12px.這須要手動設置才行.但瀏覽器用戶通常都不會去設置這個.因此讓字體不要小於12像素,不然chrome瀏覽器無法顯示

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

3. em和rem的區別

對於漢字來講,寬高同樣,因此font-size高度就是1個em的值(M這個字寬高基本一致,且寬度就是一個漢子的寬度.因此叫em)
區別:
em:本身的font-size的值
rem:根元素的font-size
程序員

4.動態REM

作響應式以前須要四個設計圖(沒圖不作.由於設計不是前端該作的事,沒有完整最終肯定的的設計圖以前,不要寫代碼.):
一個是窄屏,一個是寬屏,一個是ipad,一個是手機端的面試

不一樣的屏幕獲得不一樣的樣子算式響應式.

這篇博客不討論響應式.只看手機端怎麼作.chrome

4.1手機端出現的問題:

pc端只須要選一個佈局,而後定寬就能夠了,npm

可是手機端,手機太多.

各類寬度像素都有不少.沒有辦法作響應式,
解決方法:編程

使用百分比:例如,寬度5%,40%,讓它始終自適應.
總體縮放:作一個圖,而後遇到寬度不同的狀況就總體縮放

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

百分比佈局缺點:寬度容易肯定,由於能夠和父容器做比較,是相對於父容器的.可是高度很難肯定,好比高度寫成20%,沒有寫過,想作一個寬高1:2的div,無法作,有很強的不肯定性.高度沒有辦法跟寬度作任何的配合

若是想寫出下面的設計

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

即若是手機寬度變化,那麼就不會適應屏幕變化

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

想要的效果是全部元素按比例放大

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

4.3 最終解決方案

rem依賴的是<html>的font-size,使用js使<html>的font-size依賴pagewidth,那麼rem就間接地依賴於頁面的pagewidth

因此引入REM方案

在<head>標籤里加上以下代碼,讓1rem等於頁面寬度

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>動態REM</title>
  <script>
    var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
  </script>
  
</head>

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

無論屏幕寬度如何變化,佈局老是完美適應屏幕

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的值了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。