国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS9:動態(tài) REM-手機專用的自適應(yīng)方案

ityouknow / 2973人閱讀

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

CSS9:動態(tài) REM-手機專用的自適應(yīng)方案

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

當(dāng)別人問會不會移動端開發(fā),說會就行了,因為我會了動態(tài)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像素法則

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

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

3. em和rem的區(qū)別

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

4.動態(tài)REM

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

不同的屏幕得到不同的樣子算式響應(yīng)式.

這篇博客不討論響應(yīng)式.只看手機端怎么做.

4.1手機端出現(xiàn)的問題:


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

但是手機端,手機太多.

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

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

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

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


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

如果想寫出下面的設(shè)計

假設(shè)固定寬度為320px,固定寬高后出現(xiàn)的問題:

即如果手機寬度變化,那么就不會適應(yīng)屏幕變化

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

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


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

4.3 最終解決方案

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


所以引入REM方案

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


  
  
  動態(tài)REM

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

不管屏幕寬度如何變化,布局總是完美適應(yīng)屏幕

4.4優(yōu)化

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

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

rem和其他長度單位混用

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

5.使用sass自動將設(shè)計稿的px轉(zhuǎn)換為rem


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

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


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

5.1 安裝并使用sass

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

全局安裝
npm i -g node-sass
如果使用windows，那么一定會報錯，我也不知道為什么，所以推薦從現(xiàn)在開始，編程使用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文件夾里創(chuàng)建style.scss接下來：

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

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

例如，在style.scss里寫

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

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

自動轉(zhuǎn)化成符合正確語法的css語句
所以，
在 scss 文件里添加：

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 640; // 640 是設(shè)計稿的寬度，你要根據(jù)設(shè)計稿的寬度填寫。設(shè)計師的設(shè)計稿寬度需要統(tǒng)一

.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

那么相應(yīng)得，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的值了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52610.html

相關(guān)文章

  • CSS9:動態(tài) REM-手機專用的自適應(yīng)方案

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

    joyqi 評論0 收藏0

  • 前端面試題（移動適配，閉包，this，HTTP狀態(tài)碼，排序思路，頁面加載，數(shù)組去重）

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

    chaos_G 評論0 收藏0

  • 真的,移動端尺寸自適應(yīng)與dpr無關(guān)

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

    omgdog 評論0 收藏0

  • 真的,移動端尺寸自適應(yīng)與dpr無關(guān)

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

    617035918 評論0 收藏0

發(fā)表評論

0條評論

ityouknow

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<