手機(jī)端自適應(yīng)方案

REM(手機(jī)端自適應(yīng)方案)

熱熱身

px 像素
rem (root-em) 也就是根元素HTML的font-size
vh: view height 100vh = 視口高度
vw: view width 100vw = 視口寬度


字體統(tǒng)一

不同瀏覽器有不同的默認(rèn)字體僵井,所以最好做項(xiàng)目前使用自己的reset.css重置一遍剖效,但是Chorme有默認(rèn)的最小字號(hào)菊值。


字體度量

一個(gè)元素中:1em = 1個(gè)字體的大小
也就是一個(gè)大寫M的大忻捅椤(涉及字體度量知識(shí))
知乎這篇寫的很好

PC響應(yīng)式

對(duì)不同屏幕大小做不同的樣子 - PC端
利用CSS媒體查詢

移動(dòng)端自適應(yīng)

不同屏幕大小的手機(jī)的網(wǎng)頁(yè)自適應(yīng)大小 - 移動(dòng)端
利用控制根元素font-size,使用rem控制大小


例如:

iphone - 375 x 667
iphone6+ - 414 x 736
iphone5 - 320 x 568
Nexus 412 x 732

· 響應(yīng)式

0~320 做一套CSS
320~375 另一套CSS
375~414 第三套CSS

· 自適應(yīng)

只有一套(越大的手機(jī)驰后,顯示越大)

方法

① JS控制HTML的font-size = 屏幕寬度
② CSS中寬高: 0.5rem = 半屏幕寬度
③ 用stylus自定義函數(shù)做rem -> px的轉(zhuǎn)換


12px原則

html中字體最小為12px
body中的字體用px固定(reset.css)


最近的自我總結(jié):

1肆资、最近用vue模仿去哪兒網(wǎng),踩坑踩的還是很爽的
2灶芝、想學(xué)的更好必須要強(qiáng)迫自己學(xué)英文啊郑原,大部分文檔都是英文的(LESS等等)
3、感覺(jué)less沒(méi)有stylus好用夜涕,stylus真的是無(wú)敵

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末颤专,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子钠乏,更是在濱河造成了極大的恐慌栖秕,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件晓避,死亡現(xiàn)場(chǎng)離奇詭異簇捍,居然都是意外死亡只壳,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門暑塑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)吼句,“玉大人,你說(shuō)我怎么就攤上這事事格√柩蓿” “怎么了?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵驹愚,是天一觀的道長(zhǎng)远搪。 經(jīng)常有香客問(wèn)我,道長(zhǎng)逢捺,這世上最難降的妖魔是什么谁鳍? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮劫瞳,結(jié)果婚禮上倘潜,老公的妹妹穿的比我還像新娘。我一直安慰自己志于,他們只是感情好涮因,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著伺绽,像睡著了一般蕊退。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上憔恳,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音净蚤,去河邊找鬼钥组。 笑死,一個(gè)胖子當(dāng)著我的面吹牛今瀑,可吹牛的內(nèi)容都是我干的程梦。 我是一名探鬼主播,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼橘荠,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼屿附!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起哥童,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤挺份,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后贮懈,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體匀泊,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡优训,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了各聘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片揣非。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖躲因,靈堂內(nèi)的尸體忽然破棺而出早敬,到底是詐尸還是另有隱情,我是刑警寧澤大脉,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布搞监,位于F島的核電站,受9級(jí)特大地震影響箱靴,放射性物質(zhì)發(fā)生泄漏腺逛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一衡怀、第九天 我趴在偏房一處隱蔽的房頂上張望棍矛。 院中可真熱鬧,春花似錦抛杨、人聲如沸够委。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)茁帽。三九已至,卻和暖如春屈嗤,著一層夾襖步出監(jiān)牢的瞬間潘拨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工饶号, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留铁追,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓茫船,卻偏偏與公主長(zhǎng)得像琅束,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子算谈,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案涩禀? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,761評(píng)論 1 92
  • 轉(zhuǎn)載地址:http://blog.csdn.net/angle0306/article/details/78900...
    王培921223閱讀 1,346評(píng)論 0 8
  • Ctrl 組合快捷鍵 快捷鍵說(shuō)明 Ctrl+PgDn在工作表選項(xiàng)卡之間從左至右進(jìn)行切換。 Ctrl+PgUp在工作...
    一一休閱讀 1,079評(píng)論 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5然眼? 答:HTML5是最新的HTML標(biāo)準(zhǔn)艾船。 注意:講述HT...
    kismetajun閱讀 27,521評(píng)論 1 45
  • 有時(shí)候人很怪,明明很多卻不滿意。明明很少就開心的不得了丽声。所謂的幸福礁蔗,大概不是用物質(zhì)的多寡來(lái)衡量,而是內(nèi)心對(duì)他的態(tài)度...
    天天向上的orange閱讀 109評(píng)論 0 0