WebApp開發之--"rem"單位
隨著web app的興起,rem這是個低調的css單位,近一兩年開始嶄露頭角,有許多朋友對於它的評價不一,有的在嘗試使用,有的在使用過程中遇到坑就棄用了。但是我認為rem是用來做web app它絕對是最合適的人選之一。
一、rem是什麼?
rem(font size of the root element)是指相對於根元素的字型大小的單位。
簡單的說它就是一個相對單位。看到rem大家一定會想起em單位,em(font size of the element)是指相對於父元素的字型大小的單位。
區別:它們之間其實很相似,只不過一個計算的規則是依賴根元素一個是依賴父元素計算。
二、為什麼web app要使用rem?
這裡我特別強調web app,web page就不能使用rem嗎,其實也當然可以,不過出於相容性的考慮在web app下使用更加能突顯這個單位的價值和能力,接下來我們來看看目前一些企業的web app是怎麼做螢幕適配的。
1、實現強大的螢幕適配佈局:
最近iphone6一下出了兩款尺寸的手機,導致的移動端的螢幕種類更加的混亂,記得一兩年前做web app有一種做法是以320寬度為標準去做適配,超過320的大小還是以320的規格去展示,這種實現方式以淘寶web app為代表作,但是近期手機淘寶首頁進行了改版,採用了rem這個單位,首頁以內依舊是和以前一樣各種混亂,有定死寬度的頁面,也有那種流式佈局的頁面。
我們現在在切頁面佈局的使用常用的單位是px,這是一個絕對單位,web app的螢幕適配有很多中做法,例如:流式佈局、限死寬度,還有就是通過響應式來做,但是這些方案都不是最佳的解決方法。
例如流式佈局的解決方案有不少弊端,它雖然可以讓各種螢幕都適配,但是顯示的效果極其的不好,因為只有幾個尺寸的手機能夠完美的顯示出視覺設計師和互動最想要的效果,但是目前行業裡用流式佈局切web app的公司還是挺多的,看看下面我收集的一些案例:
1.亞馬遜
2.攜程
上面的網站都是採用的流式佈局的技術實現的,他們在頁面佈局的時候都是通過百分比來定義寬度,但是高度大都是用px來固定住,所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長,但是高度還是和原來一樣,實際顯示非常的不協調,這就是流式佈局的最致命的缺點,往往只有幾個尺寸的手機下看到的效果是令人滿意的,其實很多視覺設計師應該無法接受這種效果,因為他們的設計圖在大螢幕手機下看到的效果相當於是被橫向拉長來一樣。
流式佈局並不是最理想的實現方式,通過大量的百分比佈局,會經常出現許多相容性的問題,還有就是對設計有很多的限制,因為他們在設計之初就需要考慮流式佈局對元素造成的影響,只能設計橫向拉伸的元素佈局,設計的時候存在很多侷限性。
2、固定寬度做法
還有一種是固定頁面寬度的做法,早期有些網站把頁面設定成320的寬度,超出部分留白,這樣做視覺,前端都挺開心,視覺在也不用被流式佈局限制自己的設計靈感了,前端也不用在搞坑爹的流式佈局。但是這種解決方案也是存在一些問題,例如在大螢幕手機下兩邊是留白的,還有一個就是大螢幕手機下看起來頁面會特別小,操作的按鈕也很小,手機淘寶首頁起初是這麼做的,但近期改版了,採用了rem。
3、響應式做法
響應式這種方式在國內很少有大型企業的複雜性的網站在移動端用這種方法去做,主要原因是工作大,維護性難,所以一般都是中小型的門戶或者部落格類站點會採用響應式的方法從web page到web app直接一步到位,因為這樣反而可以節約成本,不用再專門為自己的網站做一個web app的版本。
4、設定viewport進行縮放
天貓的web app的首頁就是採用這種方式去做的,以320寬度為基準,進行縮放,最大縮放為320*1.3 = 416,基本縮放到416都就可以相容iphone6 plus的螢幕了,這個方法簡單粗暴,又高效。說實話我覺得他和用接下去我們要講的rem都非常高效,不過有部分同學使用過程中反應縮放會導致有些頁面元素會糊的情況。
1 |
< meta name = "viewport" content = "width=320,maximum-scale=1.3,user-scalable=no" >
|
上面講了一大堆目前大部分公司主流的一些web app的適配解決方案,接下來講下rem是如何工作的。前面我們說過rem是通過根元素進行適配的,網頁中的根元素指的是html我們通過設定html的字型大小就可以控制rem的大小。舉個例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
html{
font-size:20px;
}
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}
|
上面程式碼結果按鈕大小如下圖:
我把html設定成10px是為了方便我們計算,為什麼6rem等於60px。如果這個時候我們的.btn的樣式不變,我們再改變html的font-size的值,看看按鈕發生上面變化:
1 2 3 |
html{
font-size:40px;
}
|
按鈕大小結果如下:
上面的width,height變成了上面結果的兩倍,我們只改變了html的font-size,但.btn樣式的width,height的rem設定的屬性不變的情況下就改變了按鈕在web中的大小。
其實從上面兩個案例中我們就可以計算出1px多少rem:
第一個例子:
120px = 6rem * 20px(根元素設定大值)
第二個例子:
240px = 6rem * 40px(根元素設定大值)
推算出:
10px = 1rem 在根元素(font-size = 10px的時候);
20px = 1rem 在根元素(font-size = 20px的時候);
40px = 1rem 在根元素(font-size = 40px的時候);
在上面兩個例子中我們發現第一個案例按鈕是等比例放大到第二個按鈕,html font-size的改變就會導致按鈕的大小發生改變,我們並不需要改變先前給按鈕設定的寬度和高度,其實這就是我們最想看到的,為什麼這麼說?接下來我們再來看一個例子:
由上面兩個的demo中我們知道改變html的font-size可以等比改變所有用了rem單位的元素,所以大家可以通過chrome瀏覽器的除錯工具去切換第三個的demo在不同裝置下的展示效果,或者通過縮放瀏覽器的寬度來檢視效果,我們可以看到不管在任何解析度下,頁面的排版都是按照等比例進行切換,並且佈局沒有亂。我只是通過一段js根據瀏覽器當前的解析度改變font-size的值,就簡單的實現了上面的效果,頁面的所有元素都不需要進行任何改變。
到這裡肯定有很多人會問我是怎麼計算出不同解析度下font-size的值?
首先假設我上面的頁面設計稿給我時候是按照640的標準尺寸給我的前提下,(當然這個尺寸肯定不一定是640,可以是320,或者480,又或是375)來看一組表格。
上面的表格藍色一列是上面案列中頁面的尺寸,頁面是以640的寬度去切的,怎麼計算不同寬度下font-site的值,大家看錶格上面的數值變化應該能明白。舉個例子:384/640 = 0.6,384是640的0.6倍,所以384頁面寬度下的font-size也等於它的0.6倍,這時384的font-size就等於12px。在不同裝置的寬度計算方式以此類推。
上面的案列中我是通過JS去動態計算根元素的font-size,這樣的好處是所有裝置解析度都能相容適配,淘寶首頁目前就是用的JS計算。但其實不用JS我們也可以做適配,一般我們在做web app都會先統計自己網站有哪些主流的螢幕裝置,然後去針對那些裝置去做media query設定也可以實現適配,例如下面這樣:
1
2
3
相關推薦WebApp開發之--"rem"單位隨著web app的興起,rem這是個低調的css單位,近一兩年開始嶄露頭角,有許多朋友對於它的評價不一,有的在嘗試使用,有的在使用過程中遇到坑就棄用了。但是我認為rem是用來做web app它絕對是最合適的人選之一。 一、rem是什麼? rem(font 前端移動端開發之rem然而 class 一個 onchange 前端 設備 解決 版本 image 前言 作為一名前端工程師,我們不僅要會PC端開發,還要會移動端開發,而且現在移動端占據主要流量,所以掌握移動端開發的技能更是必須的。 那麽進行移動端的開發,什麽是必須,我們想要的效果是什麽? 移動WebAPP開發之實戰美團外賣視訊教程第1章 課程介紹通過課程介紹,瞭解學習課程的必要性,所包含的知識點,課程安排,學習前提,課程收穫,快速全面瞭解課程。1-1 課程導學第2章 移動web硬知識點本章主要講解移動web開發中必要掌握的基本知識,是進行後續學習的前提。從概述到開發除錯方法,以及viewport視窗概念和原理的講解,在到移動web開發 專案開發之rem加媒體查詢實現移動端佈局這次小編將要拿一個實際開發來將佈局,首先我們拿到美工給的圖一般會分為兩種格式一種是640的圖一種是750的圖這兩種圖其實的效果是一樣的只不過給,我們得到的測量資料不同,所以其他都是一樣 Revit二次開發之Parameter單位轉換由於Revit內部使用英制單位,我們在很多時候需要將Revit內部的各種數值轉換成我們熟悉的公制單位,尤其是對Parameter。好在Revit API為我們提供了單位轉換類UnitUtils,其中定義了各種靜態方法讓我們能很方便地進行單位轉換而不必瞭解各種單位 【WebAPP開發之路】HTML5的學習(一)HTML5的發展也有段時間了,一直想去學學這個炙手可熱的技術,可是之前一直沒多少時間,最近公司開始著手這方面技術,我也跟著潮流開始學習WebAPP,那麼開始WebAPP開發之旅。 我用的開發環境是HBuilder,截圖如下: 新建一webAPP,如下,選 移動端開發之根元素rem單位計算函式什麼是rem rem與em是用作手機端的單位,rem是根據根元素html來定義的一個單位大小,爾em是根據父元素繼承計算的單位值,因此我們更多的會使用到rem單位。那麼我們如何定義根元素HTML的大小呢?請看下面程式碼: $(function(){ function setRem( Revit二次開發之單位轉換Revit內部基本單位是英尺,如果要獲取或設定構件引數數值需要進行單位轉換,比如轉換為基本的毫米或米等單位 1.可以使用常規方式進行轉換: 1英尺等於0.3047999995367米,等於304.7999995367毫米 2.可以使用RevitA 響應式佈局之尺寸單位rem使用web實際開發過程中,特別是移動端的頁面,會遇到元素尺寸及字型在不同解析度裝置上表現差異較大,甚至嚴重影響使用者體驗; 我現在的做法是使用rem作為尺寸單位,來實現頁面內元素尺寸及字型在不同寬度裝置下自由縮放尺寸,從而解決小螢幕上顯示牛大字的尷尬情況; 1. 設定ht 移動端開發rem單位的格式化js檔案flexible.js有關前端開發的移動端適配, 藉助rem可以省去很多媒體查詢的工作, 對於rem, 可以在css中做一些規定, 也可以直接通過js來控制, 這樣, 更是最大程度的還原了設計圖. 以下程式碼為轉載 ;(function(win, lib) { va webapp系列開發之二:Dreamweaver CS6配置Phonegap執行環境介紹安裝好CS6後,點選選單欄上的“站點”: 然後選擇 Phonegap Build服務: 點選Phonegap Build 配置後,會彈出下圖: 選擇sdk根目錄,我這裡的目錄是(C:\Program Files\adt-bundle-windows-x86-201305 android應用開發之View的大小計量單位(px、dpi、dp、dip、sp)一、畫素(px)與螢幕解析度1)px(Pixels ,畫素):對應螢幕上的實際畫素點。例如,320*480的螢幕在橫向有320個象素,在縱向有480個象素。 2)螢幕解析度就是在螢幕上顯示的物理畫素總和 微信公眾平臺開發之萬能表單平臺 體驗 src .net 等等 art net 獎勵 功能 微信公眾平臺開發之萬能表單是為了方便我們得到用戶的信息。我們能夠在後臺設置不論什麽須要用戶填寫的信息,比方:電話,姓名,性別,工作等等信息,當然我們也能夠設置一定的獎勵,僅僅要完好這些信息就能夠得到一定 ios開發之 -- invalid nib registered for identifier層級關系 註意 刪除 出現 ide 提示 sta tab 後來 今天在寫代碼的時候,碰到這麼一個問題: invalid nib registered for identifier (重用符) - nib must contain exactly one top level 移動web開發之像素和DPRjavascript element 英語單詞 計算機 web開發 定義 像素,又稱畫素,是圖像顯示的基本單位,譯自英文“pixel”,pix是英語單詞picture的常用簡寫,加上英語單詞“元素”element,就得到pixel,故“像素”表示“圖像元素”之意,有時亦被稱為pel(pi iOS開發之視頻根據url獲取第一幀圖片,獲取任一幀圖片keyword rac onerror 根據 ati parameter all ger mage + (UIImage*) thumbnailImageForVideo:(NSURL *)videoURL atTime:(NSTimeInterval)time { AV (6)微信二次開發 之 微信文本消息接口實現微信 odin link 消息處理 nal puts 算法 帳號 接口實現 p.p1 { margin: 13.0px 0.0px 13.0px 0.0px; text-align: justify; font: 16.0px SimSun } p.p2 { margin: Android開發之getX,getRawX,getWidth,getTranslationX等的區別save string hlist getwidth sta 是我 touch 項目 寬度 轉載請註明出處:http://blog.csdn.net/dmk877/article/details/51550031 好久沒寫博客了,最近工作確實挺忙的,剛剛結束了一個 微信小程序開發之頁面wxml裏面實現循環 wx:forbin quest span geo back 微信小程序 navi 取數 循環語句 js代碼: Page({ data:{ upploadimagelist:{}, //上報圖片列表 js數組 }}) var uploadimageObj=JSON.parse( Android應用開發之所有動畫使用詳解factory 技術分享 resource bsp phi 顯示 程序 恢復 分享 題外話:有段時間沒有更新博客了,這篇文章也是之前寫了一半一直放在草稿箱,今天抽空把剩余的補上的。消失的這段時間真的好忙,節奏一下子有些適應不過來,早晨七點四十就得醒來,晚上九點四十才準備下班 |