整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
觸前端的小伙伴們，相信大家對(duì)盒子水平居中再熟悉不過(guò)了，盒子水平居中的兩個(gè)缺一不可的條件為：寬度和margin:0 auto;
然而進(jìn)一步推想盒子水平垂直居中怎么實(shí)現(xiàn)呢，同樣我們可以借助定位以及top：50%和left：50%加margin-left和margin-right的值設(shè)置為寬度的一般加負(fù)號(hào)。
兩者都o(jì)k了，那么我們?cè)賮?lái)想一下如果一個(gè)盒子不確定寬度怎么實(shí)現(xiàn)讓它水平居中呢？
具體可見(jiàn)如下代碼：
想學(xué)習(xí)更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干貨。
如此一來(lái)，一個(gè)簡(jiǎn)單的需求就實(shí)現(xiàn)了，同時(shí)大家也掌握了三種居中的情況，這些情況也是我們平時(shí)項(xiàng)目中經(jīng)常用到的，希望對(duì)大家有所幫助。
端開(kāi)發(fā)過(guò)程中，尺寸單位是我們必須用到的，下面我們對(duì)css中常見(jiàn)的幾種尺寸單位px,em,rem,rpx進(jìn)行逐一介紹
在這之前，需要先對(duì)幾個(gè)概念進(jìn)行普及介紹
基本概念
（以下概念讀起來(lái)可能有些晦澀，如果看不懂也沒(méi)關(guān)系）
像素
它不是自然界的物理長(zhǎng)度，指基本原色素及其灰度的基本編碼。
css中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。
在為桌面瀏覽器設(shè)計(jì)的網(wǎng)頁(yè)中，我們無(wú)需對(duì)這個(gè)津津計(jì)較，但在移動(dòng)設(shè)備上，必須弄明白這點(diǎn)。
在早先的移動(dòng)設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個(gè)css像素確實(shí)是等于一個(gè)屏幕物理像素的。
后來(lái)隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的屏幕像素密度越來(lái)越高，從iphone4開(kāi)始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒(méi)變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時(shí)，一個(gè)css像素是等于兩個(gè)物理像素的。其他品牌的移動(dòng)設(shè)備也是這個(gè)道理。
物理像素
它是顯示器（電腦、手機(jī)屏幕）最小的物理顯示單位，物理像素指的是顯示器上最小的點(diǎn)。物理像素的大小取決于屏幕。是一個(gè)無(wú)法改變的屬性。
設(shè)備獨(dú)立像素
我上一張圖，你就會(huì)理解什么是設(shè)備獨(dú)立像素
就是我們開(kāi)發(fā)過(guò)程中使用的css中的px
設(shè)備像素比（device pixel radio）
設(shè)備像素比=物理像素 / 設(shè)備獨(dú)立像素，單位是dpr！（device pixel radio）
Retina屏幕
所謂“Retina”是一種顯示標(biāo)準(zhǔn)，是把更多的像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度。也被稱為視網(wǎng)膜顯示屏 ——百度百科
因?yàn)镽etina屏幕的出現(xiàn)，在pc端默認(rèn)情況下，css中的1px等于1物理像素，但在移動(dòng)端1px不一定等于1物理像素，比如說(shuō)iPhone的設(shè)備獨(dú)立像素是375 667，因?yàn)樗褂昧薘etina屏幕，他的dpr是2，所以iPhone 6 的物理像素為 750 1334
在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1px所對(duì)應(yīng)的物理像素個(gè)數(shù)是不一致的。
在普通屏幕下，1px 對(duì)應(yīng) 1個(gè)物理像素(1:1)。 在Retina屏幕下（dpr=2），1px對(duì)應(yīng) 2x2個(gè)物理像素(1:4)。
你會(huì)發(fā)現(xiàn)，在移動(dòng)端開(kāi)發(fā)中使用了圖片（img標(biāo)簽），2倍圖要比1倍圖清晰，就是這個(gè)緣故
px
默認(rèn)情況下像素px是相對(duì)于屏幕分辨率而言，比如說(shuō)我們的屏幕分辨率是1440 X 900，說(shuō)的就是像素1440px X 900px；
這里會(huì)遇到另一種情況
### 瀏覽器縮放
縮放是縮放CSS像素(縮放比例為1時(shí),一個(gè)CSS像素等于一個(gè)屏幕像素)，就是在屏幕分辨率不變的情況下，用戶對(duì)瀏覽進(jìn)行了縮放
強(qiáng)調(diào)一點(diǎn)，用戶的縮放行為是對(duì)瀏覽器進(jìn)行的，縮放的是css像素，而非分辨率，分辨率是屏幕的分辨率，不論你怎么縮放當(dāng)前頁(yè)面，屏幕分辨率都不會(huì)改變
我們知道在移動(dòng)端可以在一定程度上控制用戶的縮放行為，也可以禁止用戶縮放
<meta name="viewport" content="width=device-width,initial-scale=1.0">
content屬性值 :
但是在pc端就麻煩了
windows：
mac：
由于瀏覽器菜單欄屬于系統(tǒng)軟件權(quán)限，沒(méi)發(fā)控制，我們可以通過(guò)js控制ctrl/cammond + +/- 或 Windows下ctrl + 滾輪 縮放頁(yè)面的情況
em
本人在實(shí)際開(kāi)發(fā)過(guò)程中并沒(méi)有使用過(guò)em單位，但是后面要說(shuō)的rem是基于em的，所以，對(duì)em進(jìn)行簡(jiǎn)單介紹
em 是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
看個(gè)栗子吧
<body>
<style>
html {
font-size: 50px;
}
.my-div {
width: 100%;
height: 500px;
margin-top: 50px;
background-color: gray;
font-size: 40px;
}
.my-div .parent-font {
font-size: 30px;
}
.my-div .parent-font .child-font {
font-size: 0.5em;
}
</style>
<div class="my-div">
<p class="parent-font">
我是父級(jí)文字
<span class="child-font">我是子級(jí)文字</span>
</p>
</div>
</body>
html代碼中，
第一級(jí)，html的 font-size: 50px;
第二級(jí)，my-div 的 font-size: 40px;
第三級(jí)，parent-font 的 font-size:30px;
第四級(jí)，child-font 的 font-size: 0.5em;
我們通過(guò)瀏覽器查看，發(fā)現(xiàn)第四級(jí)的fong-size為15px；
我們?nèi)∠谌?jí)parent-font 的字體大小
我們通過(guò)瀏覽器查看，發(fā)現(xiàn)第四級(jí)的fong-size為20px；
當(dāng)我們?nèi)∠谌?jí)font-size后，第三級(jí)的字體大小為40px；
所以我們說(shuō)em的字體大小不是固定的，em的大小取決于父級(jí)的字體大小
當(dāng)父級(jí)的字體大小為20px，子級(jí)的1em就是20px
當(dāng)父級(jí)的字體大小為30px，子級(jí)的1em就是30px
那么說(shuō)font-size存在著繼承父級(jí)的特點(diǎn)
我們?cè)诘谝患?jí)html中設(shè)置font-size，第二級(jí)繼承第一級(jí)，第三級(jí)繼承第二級(jí)，第四級(jí)繼承第三級(jí)，以此類推
每一級(jí)都繼承自它的父級(jí)，也就是說(shuō)每一級(jí)的em所代表的px大小都不是固定的，因?yàn)樗麄兊母讣?jí)不是同一個(gè)，所以em的應(yīng)用場(chǎng)景并不多。
那么如果是em的都繼承自同一個(gè)地方，是不是可以解決很多問(wèn)題呢？
這時(shí)候rem出現(xiàn)了
rem
rem 是CSS3的一個(gè)相對(duì)單位（root em，根em）
使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素
只要html的font-size大小不變，1rem所代表的font-size大小就不會(huì)變，rem只取決于html的font-size
rem解決了哪些問(wèn)題
移動(dòng)設(shè)備的寬度是各種各樣的，每個(gè)設(shè)備的dpr也不同，換句話說(shuō)就是不同設(shè)備每一行的物理像素?cái)?shù)不同，能顯示的css的px數(shù)也不同，
如果我們寫一個(gè)div，寬度是375px，375px在這個(gè)屏幕（iPhone6）上是剛剛滿屏，因?yàn)檫@個(gè)屏幕寬度剛剛是375px( 設(shè)備獨(dú)立像素)，
當(dāng)我們換另一個(gè)寬度是414px的設(shè)備（iPhone6Plus）時(shí)，這個(gè)寬度375px的div就無(wú)法鋪滿這個(gè)屏幕，同樣的當(dāng)換一個(gè)iPhone5（320px），又會(huì)出現(xiàn)滾動(dòng)條，安卓機(jī)的寬度更是五花八門，使用media媒體查詢不靠譜，因?yàn)樗荒芨采w所有的機(jī)型寬度
我們之前說(shuō)rem的大小是相對(duì)于html的font-size的，如果html的font-size根據(jù)不同設(shè)備的寬度做動(dòng)態(tài)計(jì)算，問(wèn)題就會(huì)得到解決
我們寫頁(yè)面都是根據(jù)UI設(shè)計(jì)稿來(lái)做的，我們假設(shè)UI設(shè)計(jì)稿的寬度是750px（750px是常規(guī)寬度，當(dāng)然也可以是640px或是其他寬度，但是整個(gè)項(xiàng)目，寬度必須統(tǒng)一），唯一不變就是就屏幕寬度，我們的html的font-size（rem）只取決于設(shè)備寬度
于是
document.documentElement.style.fontSize=100 * ( document.documentElement.clientWidth / 750) + 'px'
html的font-size：document.documentElement.style.fontSize
設(shè)備的寬度：document.documentElement.clientWidth
750：UI設(shè)計(jì)稿的寬度
為了方便計(jì)算我們將font-size x 100，方便計(jì)算（乘100不是必須的，我接觸過(guò)一些項(xiàng)目就不是乘以100，但是UI設(shè)計(jì)稿中使用了sketch做了動(dòng)態(tài)計(jì)算，但我還是建議乘100，不然遇到psd的設(shè)計(jì)圖就很麻煩了）
對(duì)上面的js做些完善
const fontFun=function () {
let docEl=document.documentElement
let resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize'
const recalc=function () {
let clientWidth=docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize=100 * (clientWidth / 750) + 'px'
}
if (!document.addEventListener) return
window.addEventListener(resizeEvt, recalc, false)
window.addEventListener('pageshow', recalc, false)
document.addEventListener('DOMContentLoaded', recalc, false)
}
export {
fontFun
}
對(duì)以上代碼不做過(guò)多解釋
也可以這樣寫
(function(doc, win) {
var docEl=doc.documentElement,
resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize',
recalc=function() {
var clientWidth=docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize=100 * (clientWidth / 750) + 'px'
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
win.addEventListener('pageshow', recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
iPhone5(320px)下html的font-size:42.6667px,1rem=42.6667px
iPhone6(375px)下html的font-size:50px,1rem=50px
iPhone6Plus(414px)下html的font-size:55.2px,1rem=55.2px
rem是繼承自html的font-size，但是小程序中沒(méi)有html，那怎么辦呢？
rpx
我不基于html的font-size了，我基于一個(gè)別的值就行了，你也不需要計(jì)算這個(gè)值，我給你計(jì)算了，這就是rpx。
最終的效果就是，你開(kāi)發(fā)時(shí)在iphon6的設(shè)計(jì)稿上量了多少px，就寫多少rpx就行了，完美適配，perfect！
簽屬性命名規(guī)范
下劃線連接符命名法“hello_world”
中杠 連接符命名法“hello-world”
駱駝式命名法“helloWorld”
內(nèi)容：content/container 導(dǎo)航：nav 側(cè)欄：sidebar
欄目：column 標(biāo)志：logo 頁(yè)面主體：main
廣告：banner 熱點(diǎn)：hot 新聞：news
下載：download 子導(dǎo)航：subnav 菜單：menu
搜索：search 頁(yè)腳：footer 滾動(dòng)：scroll
版權(quán)：copyright 友情鏈接：friendlink 子菜單：submenu
內(nèi)容：content 標(biāo)簽頁(yè)：tab 文章列表：list
注冊(cè)：regsiter 提示信息：msg 小技巧：tips
加入：joinus 欄目標(biāo)題：title 指南：guild
服務(wù)：service 狀態(tài)：status 投票：vote
尾：footer 合作伙伴：partner 登錄條：loginbar
頁(yè)面外圍控制整體布局寬度：wrapper 左右中：left right center
(二)注釋的寫法:
/* Footer */
內(nèi)容區(qū)
/* End Footer */
(三)id(具有唯一性)的命名:
(1)頁(yè)面結(jié)構(gòu)
容器: container 頁(yè)頭：header 內(nèi)容：content/container
頁(yè)面主體：main 頁(yè)尾：footer 導(dǎo)航：nav
側(cè)欄：sidebar 欄目：column 左右中：left right center
頁(yè)面外圍控制整體布局寬度：wrapper
(2)導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainbav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary
(3)功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊(cè)：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動(dòng)：scroll
標(biāo)簽頁(yè)：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋：note
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
(四)class的命名:
(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體大小,直接使用"font+字體大小"作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4)標(biāo)題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事項(xiàng):
1.一律小寫;
2.盡量用英文;
3.不加中杠和下劃線; （我倒是經(jīng)常加）
4.盡量不縮寫，除非一看就明白的單詞. （偷懶經(jīng)常縮寫）
主要的 master.css 模塊 module.css 基本共用 base.css
主題 themes.css 專欄 columns.css 打印 print.css
文字 font.css 表單 forms.css 補(bǔ)丁 mend.css
布局，版面 layout.css
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
