響應(yīng)式十日談第一日:使用 rem 設(shè)置文字大小
響應(yīng)式網(wǎng)頁(yè)不僅僅是響應(yīng)不同類型的設(shè)備,而且需要響應(yīng)不同的用戶需求。響應(yīng)式的初衷是為了讓信息更好的傳遞交流,讓所有人無(wú)障礙的獲取信息,同時(shí)這也是 Web 的初衷。
序言中同樣提到,響應(yīng)式的設(shè)計(jì)應(yīng)該秉承「內(nèi)容優(yōu)先,移動(dòng)優(yōu)先」的設(shè)計(jì)原則,那么我們知道網(wǎng)頁(yè)中的內(nèi)容主要是由文字圖片等元素組成的,那么文字該如何響應(yīng)式呢?
當(dāng)我們每天面對(duì)繽紛的互聯(lián)網(wǎng)世界的時(shí)候,文字不僅僅傳遞給我們眾多的信息資訊,而且在設(shè)計(jì)師的手里,文字在網(wǎng)頁(yè)中的排版承載著一種藝術(shù)的直覺(jué)。
網(wǎng)頁(yè)中常用的文字大小單位是 px(Pixels),em,現(xiàn)在《CSS Values and Units Module Level 3》中新增了 rem 這個(gè)單位。
一、那到底什么是 rem 呢?
規(guī)范中明確寫(xiě)道:
Equal to the computed value of ‘
font-size
’ on the root element.
「rem」是指根元素(root element,html)的字體大小,好開(kāi)心的是,從遙遠(yuǎn)的 IE6 到版本帝 Chrome 他們都約好了,根元素默認(rèn)的 font-size 都是 16px。這樣一個(gè)新的單位兼容性如何呢?請(qǐng)出 Caniuse 看看吧:
太好了,IE9+,F(xiàn)irefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。
可是,W3C 那些家伙為什么要閑著下面疼的新增這樣一個(gè)單位呢?它和 em 有啥區(qū)別呢?
我們知道 em 的計(jì)算是基于父級(jí)元素的,在實(shí)際使用中給我們的計(jì)算帶來(lái)了很大的不便。所以 rem 的出現(xiàn)解救了我這樣不會(huì)算術(shù)的人,再也不用擔(dān)心父級(jí)元素的 font-size 了,因?yàn)樗冀K是基于根元素(html) 的。
比如默認(rèn)的 html font-size=16px,那么我想設(shè)置12px 的文字就是:12÷16=0.75(rem)
當(dāng)然,你可以引入 CSS 預(yù)處理工具(Sass、LESS 、Stylus等)自動(dòng)計(jì)算 rem 值,這里就不一一舉例了。
但是像我這樣的懶人或者團(tuán)隊(duì)開(kāi)發(fā)中還沒(méi)有引入 CSS 預(yù)處理工具的該腫么辦呢?只能搬個(gè)計(jì)算器啪啪啪了嗎?別急,你還可以變通一下。我們改變一下 html 的默認(rèn) font-size=10px 不就好計(jì)算了嘛!Like this:
html{
font-size:62.5%; /* 10÷16=62.5% */
}
body{
font-size:12px;
font-size:1.2rem ; /* 12÷10=1.2 */
}
p{
font-size:14px;
font-size:1.4rem;
}
需要注意的是,為了兼容不支持 rem 的瀏覽器,我們需要在 rem 前面寫(xiě)上對(duì)應(yīng)的 px 值,這樣不支持的瀏覽器可以優(yōu)雅降級(jí)。其實(shí)不用太糾結(jié)是默認(rèn)的 font-size:100%,還是設(shè)置為 font-size:62.5%,如果你引入了 CSS 預(yù)處理工具那么自然可以使用默認(rèn)值,如果由于其他原因使用 font-size:62.5% 也無(wú)可厚非,完全可以在 body 中重置回你需要的默認(rèn) font-size。
二、為啥要用 rem 呢?
黑夜給了我黑色的眼睛,我將用它尋找關(guān)懷。
瀏覽器中用戶都是可以自定義默認(rèn)的文字大小的,如果使用 px,用戶自行在瀏覽器設(shè)置中改變了文字大小后,網(wǎng)頁(yè)上是不會(huì)變化的。我們不能排除視障用戶(如近視)、老年用戶不會(huì)這么做,作為一個(gè)具有「人文關(guān)懷」的前端,我們完全可以考慮這些情況。由其是在引入了 CSS預(yù)處理工具之后,這幾乎不會(huì)增加什么成本。
也再次印證前面提到的:響應(yīng)式網(wǎng)頁(yè)不僅僅是響應(yīng)不同類型的設(shè)備,而且需要響應(yīng)不同的用戶需求。
各個(gè)瀏覽器的設(shè)置方法如下:
-
IE瀏覽器:按下 Alt 鍵,打開(kāi)菜單欄→查看→字體大小
-
Chrome 瀏覽器:設(shè)置→顯示高級(jí)設(shè)置→網(wǎng)頁(yè)內(nèi)容
-
Firefox 瀏覽器:按下 Alt 鍵,打開(kāi)菜單欄→工具→選項(xiàng)→內(nèi)容選項(xiàng)卡
- 其他瀏覽器就不一一舉例了……
三、什么時(shí)候用 rem?
既然 rem 的可用性更好,是不是在所有地方都去使用呢?別捉急,通常在標(biāo)題,正文等大面積文字的位置可以使用 rem。但是在一些特殊的設(shè)計(jì)場(chǎng)景,rem 可能會(huì)導(dǎo)致布局錯(cuò)位,比如這樣一個(gè)回頂部的按鈕:
所以,什么時(shí)候用 rem,如何用好 rem? 這也需要你拿出 18K的黑色烏金睛來(lái)照亮整個(gè)頁(yè)面。讓我們一起:
拋開(kāi)布局,響應(yīng)文字;拋開(kāi)成見(jiàn),響應(yīng)內(nèi)心。
在面對(duì)響應(yīng)式開(kāi)發(fā)的時(shí)候,什么才是合適的,什么是不合適的,你真的想好了嗎?
(看圖思考:有個(gè)小姑娘很愛(ài)漂亮,上圖是她正在偷偷的穿他*的高跟鞋……)
下面預(yù)告:
接下來(lái),第二日講為大家?guī)?lái)《響應(yīng)式十日談第二日:在Media Queries中使用 em 單位》,將為大家講解 Media Queries 中為何要用 em 作為寬度臨界值單位?這將如何提升我們的「情懷和節(jié)操」?歡迎收聽(tīng)我的微博:@jieorlin,30分鐘內(nèi)速回粉哦。
本文地址:http://m.likemindfilms.com/tutorial/wd1521.html
您可能還喜歡
- jquery Jcrop圖像裁切插件中文api文檔
- @media適配不同尺寸的手機(jī)
- 返回上一頁(yè)代碼的幾種寫(xiě)法
- Dreamweaver CC 2014新功能介紹
- 深入了解viewport和px
- 優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范
- 畫(huà)出你的風(fēng)格:HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程
- Div中height:100%無(wú)效的解決辦法
- 網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
- 為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏