CSS-畫一個iPhone12

Phone12發布一個月了，作為還沒有擁有過一個蘋果設備的窮B程序員。這次，依舊還是買不起。

于是，使用css給自己畫了一個。

先看效果：

需求分析：

1、分別畫出6個面，然后組成一個立方體。

2、圓角部分使用多個div依次旋轉一個角度，組成圓弧

一、畫iPhone背面

先畫一個圓角長方形；左下到右上漸變；增加border和內陰影使得看起來更立體。

.back {
	position: absolute;
	width: 307px;
	height: 633px;
	background: linear-gradient(65deg, rgb(26, 53, 64) 20%, rgb(37, 63, 76) 50%, rgb(117, 140, 154) 120%);
	border-radius: 46px;
	transform-style: preserve-3d;
	border: solid 2px rgb(76, 100, 117);
	box-shadow: inset 0 0 3px 1px;
}

使用徑向漸變畫出畫出一層一層的圓模擬攝像頭的光圈。復制兩個做出相機組。

.camera-group {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 128px;
	height: 128px;
	background: linear-gradient(70deg, rgb(26, 53, 64) 46%, rgb(55, 81, 93) 46%);
	border-radius: 30px;
	transform-style: preserve-3d;
	border: solid 2px rgb(76, 100, 117);
	box-shadow: inset 0 0 3px 1px;
}
.camera {
	position: absolute;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: radial-gradient(#444 1px, rgb(0, 54, 161) 4px, rgb(14, 27, 29) 5px, rgb(6, 6, 6) 18px, rgb(40, 50, 57) 22px);
	border: solid 4px rgb(45, 72, 83);
	box-shadow: 0 0 3px, inset 0 0 2px;
}
.camera1 {
	left: 6px;
	top: 6px;
}
.camera2 {
	left: 6px;
	bottom: 6px;
}
.camera3 {
	top: 50%;
	transform: translateY(-50%);
	right: 6px;
	bottom: 6px;
}
.camera4 {
	position: absolute;
	right: 20px;
	top: 6px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: radial-gradient(rgb(214, 200, 217) 2px, rgb(214, 200, 197) 9px, rgb(45, 72, 83) 14px);
	box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);
}
.camera5 {
	position: absolute;
	right: 20px;
	bottom: 6px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: radial-gradient(#333 1px, rgb(14, 27, 29) 5px, rgb(6, 6, 6) 18px, rgb(40, 50, 57) 22px);
	box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);
}
.camera6 {
	position: absolute;
	right: 10px;
	bottom: 30px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgb(6, 6, 6);
	box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);
}

畫一個蘋果的logo，這里就使用一個簡單的畫法，一個div+before+after，做出蘋果logo的葉子和兩個橢圓。拼湊起接近蘋果的樣子。使用mask-image給圖片遮罩出一個豁口。

.logo {
	position: absolute;
	top: -30px;
	left: -30px;
	width: 145px;
	height: 220px;
	border-radius: 80% 70% 60% 90%/50% 50% 60% 100%;
	background: linear-gradient(70deg, rgb(26, 53, 64) 70%, rgb(55, 81, 93) 50%);
	transform: scale(.28);
	transform-origin: 0 0;
}
.logo::after {
	position: absolute;
	content: '';
	left: 97px;
	width: 145px;
	height: 220px;
	border-radius: 70% 80% 90% 60% /50% 50% 100% 60%;
	background: linear-gradient(70deg, rgb(26, 53, 64) 27%, rgb(55, 81, 93) 27%);
	-webkit-mask-image: radial-gradient(circle at 110% 38%, #0000 60px, #000 20px);
	mask-image: radial-gradient(circle at 110% 38%, #0000 60px, #000 20px);
}
.logo::before {
	position: absolute;
	top: -70px;
	left: 117px;
	width: 60px;
	height: 68px;
	background-color: rgb(55, 81, 93);
	content: '';
	border-radius: 100% 0;
}

二、畫手機正面

正面本來想一個div搞定，使用多個漸變圖片背景。不過漸變的圓邊緣會有毛刺效果不好看。

就簡單的多畫幾個漸變背景的圓形div。

.front {
	position: absolute;
	width: 307px;
	height: 633px;
	background: rgb(239, 221, 197);
	border-radius: 46px;
	transform-style: preserve-3d;
	border: solid 2px rgb(76, 100, 117);
	box-shadow: inset 0 0 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transform: translateZ(15px);
}
.front::after {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 46px;
	box-shadow: inset 0 0 0 10px;
	content: '';
}
.circle1 {
	position: absolute;
	width: 196px;
	height: 196px;
	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));
	border-radius: 50%;
	box-shadow: inset -10px 15px 50px rgb(255, 248, 147);
}
.circle2 {
	position: absolute;
	width: 196px;
	height: 196px;
	transform: translate(-60px, 0px) scale(1.9);
	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42) 20%, rgb(254, 164, 104) 80%);
	border-radius: 50%;
	box-shadow: inset 10px -15px 50px rgb(255, 248, 147), inset -3px 8px 20px rgb(239, 221, 197);
}
.circle3 {
	position: absolute;
	width: 196px;
	height: 196px;
	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));
	border-radius: 50%;
	box-shadow: inset -5px 10px 30px rgb(255, 248, 147), inset 5px -15px 40px rgb(255, 206, 86);
	transform: scale(2.8);
}
.circle4 {
	position: absolute;
	width: 196px;
	height: 196px;
	background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));
	border-radius: 50%;
	box-shadow: inset -10px 15px 50px rgb(255, 248, 147);
	transform: scale(3.6);
}

加上劉海

.front-camera {
	position: absolute;
	top: 0;
	width: 50%;
	height: 32px;
	background: #111;
	border-radius: 0 0 18px 18px/15px;
}
.front-camera::before {
	position: absolute;
	left: 20%;
	bottom: 10px;
	width: 50%;
	height: 8px;
	background: #333;
	content: '';
	border-radius: 4px;
}
.front-camera::after {
	position: absolute;
	right: 20%;
	width: 10px;
	height: 10px;
	content: '';
	background: radial-gradient(#444 1px, rgb(0, 54, 161) 2px, rgb(14, 27, 29) 5px);
	bottom: 9px;
	border-radius: 50%;
}

三、畫兩個側邊

兩個側邊比較簡單，長方形div。

在使用3個div，畫做三個開關。開關translateZ(2px)的before和after偽元素做出一個立體圖片的樣子。

.side {
	position: absolute;
	width: 30px;
	height: 541px;
	background: rgb(37, 63, 76);
	transform-style: preserve-3d;
	display: flex;
	justify-content: center;
	align-items: center;
}
.switch {
	position: absolute;
	top: 80px;
	width: 8px;
	height: 50px;
	border-radius: 4px;
	background: rgb(37, 63, 76);
	box-shadow: 1px 1px 2px, -1px -1px 2px rgb(167, 190, 204);
}
.switch-extra {
	transform-style: preserve-3d;
	transform: translateZ(3px);
}
.switch-extra::before {
	position: absolute;
	left: 0;
	top: 5%;
	height: 90%;
	width: 3px;
	background: rgb(37, 63, 76);
	content: '';
	transform-origin: left center;
	transform: rotateY(90deg);
}
.switch-extra::after {
	position: absolute;
	left: 0;
	top: 2%;
	height: 96%;
	width: 3px;
	background: rgb(37, 63, 76);
	content: '';
	transform-origin: right center;
	transform: rotateY(-90deg);
}

四、畫出頂部底部

這里跟上下兩邊類似

五、畫出四個圓角

圓角需要是多個div旋轉一定角度。拼接成一個圓弧

.pad-radius {
	position: absolute;
	width: 30px;
	height: 9px;
	background: rgb(37, 63, 76);
}
.pad-radius0 {
	transform: rotateY(-90deg) rotateX(0deg) translateZ(48px);
}
.pad-radius1 {
	transform: rotateY(-90deg) rotateX(10deg) translateZ(48px);
}
.pad-radius2 {
	transform: rotateY(-90deg) rotateX(20deg) translateZ(48px);
}
.pad-radius3 {
	transform: rotateY(-90deg) rotateX(30deg) translateZ(48px);
}
.pad-radius4 {
	transform: rotateY(-90deg) rotateX(40deg) translateZ(48px);
}
.pad-radius5 {
	transform: rotateY(-90deg) rotateX(50deg) translateZ(48px);
}
.pad-radius6 {
	transform: rotateY(-90deg) rotateX(60deg) translateZ(48px);
}
.pad-radius7 {
	transform: rotateY(-90deg) rotateX(70deg) translateZ(48px);
}
.pad-radius8 {
	transform: rotateY(-90deg) rotateX(80deg) translateZ(48px);
}
.pad-radius9 {
	transform: rotateY(-90deg) rotateX(90deg) translateZ(48px);
}

六、將各個面拼接起來

代碼倉庫地址：

https://github.com/shb190802/html5

演示地址：

https://suohb.com/demo/win/iphone12.html

007年，喬布斯在全球開發者大會上發布iPhone。

在發布會上，喬布斯充滿自信地說：“蘋果將重新定義手機”。

喬布斯先是宣布今天將發布三款產品，一部寬屏觸控的iPod、一部革命性的手機、一部飛躍性的互聯網設備，然后他又重復了兩遍，最后在人群的呼喊中神采飛揚地說到：“你們懂了嗎？它們不是相互獨立，它們合三為一，我們稱之為——iPhone!”

這次發布會注定是值得被銘記的偉大時刻。

2007年—2021年，蘋果不斷的開創-迭代-突破，發布了33款手機，相較于安卓其他廠商，蘋果發布新機的頻率非常克制，現在為大家回顧14年33款iPhone。

iPhone：重新發明了手機

2007年1月9日，第一代iPhone在MosconeCenter舉辦的Macworld2007中發布。

iPhone

iPhone的主體是一面3.5英寸觸摸屏。在當3.5英寸已經是巨屏了。iPhone沒有鍵盤，而是創新地引入了多點觸控的觸摸屏界面，當時在操作性上與其他品牌的手提電話相比占有領先地位。

喬布斯在發布會上也對比了其他手機

iPhone支持虛擬語音信箱、HTML電子郵件、Safari網頁瀏覽器、YouTube等功能，第一代iPhone共計售出了6,124,000部。

iPhone 3G：AppStore開啟移動互聯網

2008年7月11日，蘋果公司在全球22個國家及地區正式發售iPhone 3G，屏幕和處理器和iPhone 3G一致。

iPhone 3G

iPhone 3G的后蓋由第一代iPhone的鋁制改為了塑料制，手機的按鈕則從塑料制改為了金屬制。iPhone 3G推出了兩種不同的顏色，分別為黑色與白色。耳機接口改為3.5毫米耳機接口，200萬攝像頭。

iPhone 3G增加了郵件推送、AppStore等功能，AppStore標志著蘋果正式把iOS的生態建立了起來。

2008年第四季度，iPhone的總銷量超越了黑莓手機，成為世界第三大手機制造商，僅次于諾基亞及三星。

iPhone 3GS：視頻錄制，屏幕出彩

2009年，蘋果公司與中國電信運營商中國聯通達成協議，蘋果正式進入中國。

iPhone 3GS

6月8日iPhone 3GS發布，配備一塊3.5寸多點觸控屏幕。與前代iPhone相比，iPhone 3GS的屏幕由18位色升級為了24位色，這讓iPhone 3 GS的屏幕能更好地表現出色彩。在同時代的手機屏幕中十分出彩，iPhone 3GS的內部結構與第一代相似，但增加了一些模塊，例如3G網絡、全球衛星定位系統等。

iPhone 3GS搭載了一枚320萬像素攝像頭，與前代iPhone比較，除了在像素上有提升外，iPhone 3GS也增加了一些相機功能，例如自動對焦、視頻錄制等。

iPhone 4：極致的工業設計，開啟視頻通話

2010年6月7日，喬布斯在WWDC中發布iPhone 4。iPhone 4是一款非常成功的手機，采用了雙面玻璃機身、不銹鋼中框，喬布斯稱iPhone 4為世界上最薄的手機，驚艷十足。

iPhone 4

同時，iPhone 4采用了3.5英寸的Retina屏，達到了驚人的326ppi，按照喬布斯的說法，是人視網膜的水平。系統也引入了多任務功能和蘋果公司新的FaceTime視頻聊天服務。

iPhone 4也是第一款包含前置鏡頭的iPhone，也是第一款以CDMA網絡版本發布的iPhone，結束AT&T作為iPhone產品于美國獨家運營商的時期。自拍和視頻通話進入大眾的生活。

這一代也讓蘋果深陷“天線門”，其新的天線設計出現異常，導致手機在以某種方式手持的時候，手機將會丟失其信號，大多數人接觸手機的外緣也會導致訊號強度顯著下降。

iPhone 4s：Siri登場，喬布斯遺作

2011年10月4日10時在蘋果總部舉行的發布會，蘋果公司新CEO提姆·庫克在發布會上發布iPhone 4s。由于iPhone銷量驚人，蘋果公司成為2011年盈利最多的手機制造商，超越屹立于榜首長達十多年的諾基亞。 iPhone 4s的外觀上與iPhone 4幾乎相同，但iPhone 4s有更高像素（800萬像素）的攝像頭。

iPhone 4s

初次登場的Siri，該語音助理服務可以識別自然的人類語言。基于語音系統，iPhone 4s成為了更加智能的語音識別設備，可以通過語音控制實現天氣、短信、地圖查找等功能的交互。

喬布斯在發布會結束的第二天就去世了，喬布斯時代結束。

iPhone 5：4G更快，屏幕更大

2012年9月12日，蘋果公司發布iPhone 5，其外觀設計被重新塑造為鋁材基體的三段式機身，比前代型號更薄更輕第一款蘋果的4G手機， iPhone 5首次改變屏幕比例的設計，iPhone的屏幕由3.5吋增至4吋。手機屏幕的比例由3:2逐漸接近16:9。而且還首次采用了正反通用的Lightning數據接口。

iPhone 5

2013年國內的4g手機才慢慢發展起來。

iPhone 5s：指紋識別時代的開始

2013年9月10日，蘋果發布兩款手機，iPhone 5c及iPhone 5s，手機外觀與硬體方面則首次新增金色選項，配備蘋果的特色功能：雙色閃光燈（TrueTone）。

iPhone 5s

搭載新一代A7處理器，并且是全球首部采用64位處理器的智能手機。配備業界最先使用的按壓式指紋辨識。

iPhone 5c：最短命的iPhone

iPhone 5c是iPhone 5的換殼的版本。處理器，屏幕及鏡頭模組規格都與iPhone 5相同，搭配塑料機身，擁有綠，黃，紅，白，藍五色可選。售價折合人民幣3300元，合約機價格只有99美元，這款機器是蘋果下沉市場的一個實驗品，但是大多數人寧愿多花800塊去買iPhone 5s。iPhone 5c銷量不及iPhone 5s的四分之一，大部分消費者不愿意買一個廉價iPhone。

iPhone 5c

iPhone 6/iPhone 6 Plus：更薄更大，銷量最高

2014年9月發布iPhone 6和iPhone 6 Plus，全新的外觀設計，玻璃面板的邊緣是微曲的，而背后的鋁質包含著兩根天線的塑料條，這兩根天線十分影響美感。iPhone 6的厚度為6.9mm，而iPhone 6 Plus的厚度為7.1mm；兩者都比iPhone 5c和iPhone 5s更薄，使iPhone 6成為迄今為止蘋果公司最薄的手機。

iPhone 6 Plus

在安卓手機的大屏的壓力下，蘋果選擇了大屏幕，iPhone 6 Plus顯示屏的尺寸為5.5英寸，拋棄了喬布斯3.5吋的黃金手感。

iPhone也首次推出的NFC功能，ApplePay功能的問世。但是中國廠商在NFC上開發了公交卡，NFC并沒有在移動支付領域做大規模的推廣。

iPhone 6系列是目前蘋果銷量最高的手機，累計銷量2.2億部。

iPhone 6s及iPhone 6s Plus：全新交互，性能大躍進

2015年9月9日，iPhone 6s及iPhone 6s Plus發布，尺寸幾乎與前代保持一致，分別為4.7英寸和5.5英寸。

iPhone 6s

iPhone6s的處理器為蘋果A9處理器。A9芯片比A8要快70%，圖形處理能力快90%。第一個使用LPDDR4內存，存儲既不是eMMC也不是UFS規范，而是NVMe，和上一代讀取速度相比翻倍。處理器、內存、存儲這三件套是最影響手機流暢度的，iPhone 6s得到了接近翻倍的升級。這也是iOS15仍然支持更新iPhone 6s的重要原因。

iPhone首次搭載1200萬高像素鏡頭，把蘋果影像推到了新的高度。

在交互上Phone 6s做出了第一代3DTouch，3DTouch在原有ForceTouch輕按、輕點的基礎上新增了重按這一維度的功能。所以iPhone 6s的屏幕有輕點、輕按及重按這三層維度。

A9芯片的升級，使得iPhone 6s可以通過語音實時喚醒Siri。靈敏低功耗，給了手機操作第二次生命。

iPhone SE：性能強悍的小屏旗艦

2016年3月22日，蘋果公司發布iPhone SE。它采用了與iPhone 5s一樣的外觀設計，但不同的是，iPhone SE采用了與iPhone 6s相同的A9處理器，硬件實力與iPhone 6s相當。比起iPhone 5s的A7芯片擁有2倍的CPU性能、3倍的GPU性能。

iPhone SE

iPhone 7及iPhone7 Plus：取消耳機孔

2016年9月7日，蘋果公司在美國加州發布了iPhone 7和iPhone 7 Plus兩款新產品。

iPhone 7和iPhone 7 Plus

相對于iPhone 6s來說外觀沒有大變化，背部天線的框線得以減少，顯得背部很而提供新的暗色經鏡面處理“亮黑色”及“黑色”，太空灰被取消，其他舊有配色“銀色”、“金色”、“玫瑰金色”則維持不變，從iPhone 6s開始就有3DTouch的設計，還有回到主畫面（Home）的按鍵也提高靈敏度，同時采用固態按鍵取代原來的按動式按鍵，并利用新的TapticEngine震動來模擬按壓。

最讓消費者印象深刻的是，iPhone 7系列取消了耳機接口。

iPhone 8及iPhone 8 Plus：全程陪跑

2017年9月12日蘋果公司發布iPhone 8及iPhone 8 Plus。iPhone 8采用了前后雙玻璃材質，并且采用了航空級鋁材質，并且有著Retina顯示屏；還有TureTone顯示屏保證色準；采用1200萬像素，采用全新的CMOS，支持光學防抖；配備1200萬像素廣角及長焦雙鏡頭攝像頭，支持無線充電，并加入了AR游戲。

面對萬眾期待的iPhone X，iPhone 8及iPhone 8 Plus甚至沒有廣告語。

iPhone 8

iPhone X：全面屏來了

2017年9月12日，除了發布iPhone 8系列，除此之外蘋果還發布了iPhone上市十周年的紀念機款：iPhone X。

iPhone X

iPhone X 首次采用全面屏設計，異型切割的5.8吋（對角線圓弧）超視網膜顯示屏（解析度458ppi）。“劉海”的設計不只是攝像頭，里面還裝了蘋果替代指紋解鎖的Face ID，面部解鎖替代了指紋解鎖。

也帶來了全新的全面屏手勢操作。

iPhone XR，iPhone XS和iPhone XS Max：比大更大

2018年9月12日，蘋果公司推出了三款新設備，它們分別是：iPhone XR，iPhone XS和iPhone XS Max。

iPhone XR

iPhone XR配備一個名為LiquidRetina顯示屏的6.1英寸LCD熒幕，其ppi只有326，屏幕有肉眼可見的顆粒感。iPhone XS搭載5.8英寸超視網膜顯示屏，iPhone XS Max則搭載6.5英寸超視網膜顯示屏。兩款手機的屏幕均為OLED材質。

蘋果與高通因專利問題發生糾紛后，轉而使用英特爾研發的基帶芯片搭載于新一代iPhone上。由于英特爾基帶的性能不佳，iPhoneXs/XsMax出現信號問題。

iPhone 11系列：雙卡雙待，專供中國

2019年9月10日，蘋果公司推出了三款新設備：iPhone 11，iPhone 11 Pro，iPhone 11 Pro Max。其中iPhone11 Pro，iPhone 11 Pro Max首次搭載了三鏡頭系統。

iPhone 11 Pro Max

依然是十分常規的升級，沒有什么突出的優勢，最顯著的變化就是背部三個攝像頭的排布。iPhone 11 Pro支持立體聲錄音功能，以及前后攝像頭的人像模式及人像光效功能；后置攝像頭支持4K最高60fps的視頻拍攝，支持擴展動態范圍拍攝。

iPhone 11全系支持雙卡雙待，但該功能專供中國市場，同時，iPhone 11將取消壓力傳感的3DTouch，由HapticTouch取而代之。另外，iPhone 11系列支持反向無線充電。將AirPod放在iPhone 11手機背面即可為AirPods無線充電。

iPhone SE (第二代)：估計是最后一代小屏

2020年4月15日，蘋果公司推出了iPhone SE (第二代)。采用與iPhone 8高度相似的外觀設計，內置了與iPhone11 Pro相同的A13仿生處理器。

iPhone SE（第二代）

iPhone SE（第二代）擁有4.7英寸視網膜高清顯示屏，相較于iPhone 8，iPhone SE（第二代）并不支持三維觸控，其只能使用觸感觸控進行快速操作。

iPhone 12系列：蘋果首款5G，不送充電器

2020年10月13日，蘋果公司推出了四款新設備：iPhone 12 mini，iPhone 12，iPhone 12 Pro和iPhone12 Pro Max。

這也是蘋果第一次一次性推出4款手機。

iPhone 12系列將5.4英寸和6.1屏幕英寸，而iPhone 12 Pro系列將提供6.1英寸和6.7英寸屏幕尺寸。全系配備5nm的A14，這是iPhone首次支持5G網絡。邊框從彎弧邊框改成和iPhone4類似的平直邊框，其他方面都是常規升級。

唯一讓人印象深刻的是蘋果為了環保，不附帶充電頭。

iPhone 13系列：首次價格下調

2021年9月14日，蘋果公司推出了四款手機：iPhone 13 mini，iPhone 13，iPhone 13 Pro，iPhone 13 Pro Max。

iPhone 13 Pro Max

iPhone 13系列將芯片改為采用5納米工藝制造的A15，iPhone 13系列相較于前代縮小了螢幕缺口部分的占據面積約20%。iPhone 13系列因單顆鏡頭大小變大，以至于iPhone 13系列的雙鏡頭是采用斜對角設計而非前代的垂直擺設。

在iPhone 13與iPhone 13 Pro系列首次加入電影模式(CinematicMode)，能依照場景自動調整景深，使用者拍完影片后依舊可以調整景深設定。

iPhone 13 Pro和iPhone13 Pro Max屏幕最高支持120Hz。兩款顯示器皆具備ProMotion技術，可讓iPhone13 Pro系列屏幕刷新率進行1-120Hz的動態變化，達到省電的效果。另外，在iPhone 13與iPhone13 Pro系列首次加入電影模式(CinematicMode)，能依照場景自動調整景深，使用者拍完影片后依舊可以調整景深設定。

最重要的是iPhone 13系列的價格比上一代最高便宜1000。

iPhone部分機型價格

總結

現在沒有一個人離開手機了，我們想象不到沒有手機的日子會是什么樣的，正如蘋果在發布iPhone的14年前，很多人想象不到移動互聯網是什么樣子的。

喬布斯拿著一個科幻般的產品展現在大家面前，滑動解鎖，屏幕被打開的一瞬間，使我相信：這，就是未來。

但是蘋果很難再給大家帶來驚喜了。iPhone硬件不再領先，蘋果lightning接口，120Hz的刷新率，以及自我超速的25W充電功率。系統方面，iOS和安卓兩家的功能互相借鑒，也沒有任何新鮮感。尤其iOS上的很多新功能其實安卓的一些廠商早就上了很多年了。

自iPhone 6系列2.2億部的巔峰銷量以來，iPhone的銷量也正在一個低谷期。但考慮到蘋果800美元的均價，以及全球智能手機市場的飽和，蘋果的表現無疑是最亮眼的。

期待蘋果未來的發布會上有人這樣說：我們又一次重新定義手機。

(7775457)

據模板

#查看模板生成的數據
var data = Mock.mock({
//list|1-10 數組元素個數隨機范圍， id|+2 屬性值遞增, age|20-30數值隨機范圍
// test|3.2-5 3.xx-3.xxxxx 整數位3，小數位位數范圍為2-5
//'yourname|2-4': 'alice-' 重復字符串的次數范圍2-4
//常規真實數據格式，@name @color @url @first @last
'list|1-10': [{'id|+2': 1 , 'age|20-30': 100}],
'name': '@name',
'color': '@color',
'url': '@url',
'email': '@email',
'friends|3': [{name: '@name'}],
'price|10-20.2-5': 11,
'cost|10-20.3': 11,
'test|3.2-5': 52,
'yourname|2-4': 'alice-'
});
JSON.stringify(data, null, 2);
var data = Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
});
JSON.stringify(data, null, 2);
#攔截請求，返回模擬數據
var Mock.mock('http://g.cn', {
'list|3-8': [{'id|+3': 1}]
});
數據模板定義
'name|rule': value name 為屬性名, rule 為規則, value 為值，屬性名和生成規則之間用|分隔，生成規則的格式有7種：

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value //.dmin-dmax 小數點后保留的位數范圍
'name|min-max.dcount': value //小數點后保留dcount位
'name|count.dmin-dmax': value //貌似用處不大
'name|+step': value //從value遞增/減

屬性值可以包含占位符(如@name)，屬性值指定了最終值的初始值和數據類型.
屬性值是字符串 String

'name|min-max': 'value' 通過重復 'value' 生成一個字符串，重復次數大于等于 min，小于等于 max。
'name|count': 'value' 通過重復 'value' 生成一個字符串，重復次數等于 count。

屬性值是數字 Number

'name|+1': 100 屬性值自動加 1，初始值為 100
'name|1-100': 100 生成一個大于等于 1、小于等于 100 的整數，屬性值 100 只用來確定類型。
'name|1-100.1-10': 100 生成一個浮點數，整數部分大于等于 1、小于等于 100，小數部分保留 1 到 10 位。

屬性值是布爾型 Boolean

'name|1': value 隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率是 1/2。
'name|min-max': value 隨機生成一個布爾值，值為 value 的概率是 min / (min + max)，值為 !value 的概率是 max / (min + max)。

屬性值是對象 Object

'name|min-max': {} 從屬性值 {} 中隨機選取 min 到 max 個屬性。
'name|count': {} 從屬性值 {} 中隨機選取 count 個屬性。

屬性值是數組 Array

'name|1': [{}, {} ...] 從屬性值 [{}, {} ...] 中隨機選取 1 個元素，作為最終值。
'name|min-max': [{}, {} ...] 通過重復屬性值 [{}, {} ...] 生成一個新數組，重復次數大于等于 min，小于等于 max。
'name|count': [{}, {} ...] 通過重復屬性值 [{}, {} ...] 生成一個新數組，重復次數為 count。

屬性值是數組 Function

'name': function(){} 執行函數 function(){}，取其返回值作為最終的屬性值，上下文為 'name' 所在的對象。

數據占位符定義
占位符只是在屬性值字符串中占個位置，并不出現在最終的屬性值中。占位符的格式為：
@占位符
@占位符(參數 [, 參數])

用 @ 來標識其后的字符串是占位符。
占位符引用的是 Mock.Random 中的方法。
通過 Mock.Random.extend() 來擴展自定義占位符。
占位符也可以引用數據模板中的屬性。
占位符會優先引用數據模板中的屬性

{
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
}
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}

常用方法

Mock.mock( rurl?, rtype?, template|function(options) )

根據數據模板生成模擬數據。

參數的含義和默認值如下所示：

參數 rurl：可選。表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 /\/domain\/list.json/、'/domian/list.json'。

參數 rtype：可選。表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。

參數 template：可選。表示數據模板，可以是對象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

參數 function(options)：可選。表示用于生成響應數據的函數。

參數 options：指向本次請求的 Ajax 選項集。

Mock.mockjax(library)

覆蓋（攔截） Ajax 請求，目前內置支持 jQuery、Zepto、KISSY。

Mock.Random

Mock.Random 是一個工具類，用于生成各種隨機數據。Mock.Random 的方法在數據模板中稱為“占位符”，引用格式為 @占位符(參數 [, 參數]) 。

Mock.tpl(input, options, helpers, partials)

基于 Handlebars、Mustache 的 HTML 模板生成模擬數據。

在線咨詢

上一篇：html基礎標簽大全（網頁開發基礎）
下一篇：什么是HTML？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS-畫一個iPhone12

您的項目需求