摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端

尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不由得感覺(jué)眼前一亮，順理成章的聯(lián)想到 Word 文檔排版中用到的的左對(duì)齊、右對(duì)齊和居中對(duì)齊，然而很快就失望的發(fā)現(xiàn) CSS 中并不存…

相信很多剛涉及移動(dòng)端設(shè)計(jì)與開(kāi)發(fā)的同學(xué)基本上會(huì)在前端開(kāi)發(fā)中的像素問(wèn)題上糾結(jié)很久，所以寫下這篇筆記，便于自己日后翻閱。如果有啥理解上的錯(cuò)誤，歡迎大家指正~

很詳細(xì)得講解了移動(dòng)端 HTML5 遇到的適配問(wèn)題，原因和解決辦法，非常有用的一篇文章。

遙想去年入前端坑的時(shí)候，就很快遇到了移動(dòng)端頁(yè)面的開(kāi)發(fā)，天(er)真(bi)的我立馬上去量設(shè)計(jì)稿，然后擼起袖子就是干！可是打開(kāi)調(diào)試一看亂套了，先不說(shuō)布局上的問(wèn)題，就是大小看起來(lái)也不太對(duì)啊，太大了！然后就去問(wèn)老司機(jī)，他說(shuō)尺寸你要除以2才行，我心里挺郁悶的，為啥啊。。當(dāng)時(shí)項(xiàng)目緊，就先…

微信小程序起手式學(xué)習(xí) + 實(shí)戰(zhàn)演練

本文來(lái)自尚妝前端團(tuán)隊(duì)南洋 發(fā)表于尚妝 github 博客，歡迎訂閱。 移動(dòng)端 H5 頁(yè)面 rem 縮放方案 flexible.js 兼容 375px 方案的思路 參考： 移動(dòng)端高清、多屏適配方案 viewport-and-flexible.js flexible.js github 一個(gè)新的項(xiàng)目復(fù)…

可能是最全的學(xué)習(xí) Flexbox 的資源了，希望對(duì)大家有所幫助。

flex 是個(gè)非常好用的屬性，如果說(shuō)有什么可以完全代替 float 和 position ，那么肯定是非它莫屬了（雖然現(xiàn)在還有很多不支持 flex 的瀏覽器）。然而在移動(dòng)開(kāi)發(fā)中，本來(lái)絕大多數(shù)瀏覽器（包括安卓 2.3 以上的自帶瀏覽器）都支持的屬性，偏偏有個(gè)例外，就是國(guó)產(chǎn)某某 X5 內(nèi)核神器（不知哪個(gè)版本的 webkit，僅支持 display:box），自主研發(fā)這東西也不好多說(shuō)什么了

作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識(shí)的一種，個(gè)人博客: https://sunyuhui.com 最近這段時(shí)間，團(tuán)隊(duì)在做的業(yè)務(wù)主要和二維碼相關(guān)，在做的過(guò)程中，發(fā)現(xiàn)不管是自己還是團(tuán)隊(duì)里其他同學(xué)，都對(duì)二維碼本身了解甚少，因此自…

玩前端也有幾個(gè)月了，發(fā)現(xiàn)大家普遍混淆了響應(yīng)式和自適應(yīng)的概念。

十分鐘就能學(xué)會(huì)響應(yīng)式設(shè)計(jì)

請(qǐng)各位讀者添加一下作者的微信公眾號(hào)，以后有新的文章，將在微信公眾號(hào)直接推送給各位，非常感謝。 0.前言 免責(zé)聲明 若文章中內(nèi)容存在無(wú)法加載的情況，請(qǐng)移步作者其他博客。 簡(jiǎn)書 CSDN 關(guān)于本文中出現(xiàn)的面試題，請(qǐng)勿詢問(wèn)具體公司。 之所以分享出來(lái)，只是作為熱愛(ài)前端的小伙伴們分享討論…

CSS3 為我們提供了一種可伸縮的靈活的 web 頁(yè)面布局方式 - flexbox 布局，它具有很強(qiáng)大的功能，可以很輕松實(shí)現(xiàn)很多復(fù)雜布局。然而 Flex 屬性較多，不便于記憶，而在項(xiàng)目中，布局使用頻繁，那么可以將 flex 抽離為一個(gè)布局工具類，簡(jiǎn)化使用方式，快速應(yīng)用于項(xiàng)目，減少記憶成本。 Fle…

本書（系列文章）為對(duì) CSS 中 flex 布局與 grid 布局的詳細(xì)介紹，已在 GitHub 同步更新，如您在閱讀過(guò)程中發(fā)現(xiàn)描述有誤或錯(cuò)別字的情況，您可以向本項(xiàng)目提出 issus 或 Pull Request。

本系列文章為我在深入研究 CSS 的布局方式的過(guò)程中的一些總結(jié)。主要是對(duì)于 CSS3 標(biāo)準(zhǔn)里的 flex 布局方式 CSS 草案中的 grid 布局方式進(jìn)行一些總結(jié)。

前端技術(shù)棧更新太快，眼花繚亂，大家一個(gè)勁攬過(guò)來(lái)學(xué)習(xí)的時(shí)候，別忘了回頭看看那些已經(jīng)掌握的基礎(chǔ)知識(shí)。
我肯定不會(huì)說(shuō)這其實(shí)是為妹紙寫的重要知識(shí)點(diǎn)整理文章...
萬(wàn)一哪天我就去辦個(gè)培訓(xùn)班呢？

寫在前面：本文主要內(nèi)容是目前我所知道的切圖技巧結(jié)合網(wǎng)上的資料，寫出來(lái)分享一波。圖文教程，多圖！！ BB：很多人都會(huì)說(shuō)，切圖這個(gè)活倒底分給UI還是分給前端。雖然好的UI會(huì)給我們把圖切好，但是他們切的圖不一定百分之百符合我們的需求，所以我一直都覺(jué)得這是頁(yè)面仔必須要會(huì)的一項(xiàng)技能，因?yàn)椤?br>

Feature Query, Grid Layout, Native Variable。前端的親們你們顫抖了嗎？

全面而詳實(shí)！

CSS3系列我已經(jīng)寫過(guò)兩篇文章了，在這貼出鏈接，感興趣的同學(xué)可以看一下CSS3初體驗(yàn)之奇技淫巧，CSS3 3D立方體效果－transform也不過(guò)如此 第一篇主要列出了一些常用或經(jīng)典的CSS3技巧和方法；第二篇是一個(gè)用CSS3實(shí)現(xiàn)的立方體實(shí)例，詳細(xì)講解了3D旋轉(zhuǎn)和transfo…

第一次 h5 游戲類活動(dòng)開(kāi)發(fā)，干貨多多。

百分比，浮動(dòng)，普通 inline，絕對(duì)定位，彈性盒

心心念念的Canvas系列文章經(jīng)過(guò)長(zhǎng)時(shí)間的整理和沉淀，終于決定動(dòng)筆啦！我會(huì)從最簡(jiǎn)單的API開(kāi)始，逐步深入，再結(jié)合酷炫的實(shí)例，為大家?guī)?lái)這一系列的文章，希望大家多提建議，多多鼓勵(lì)！^_^激動(dòng)ing... 好，下面正文開(kāi)始： 其實(shí)canvas本身很簡(jiǎn)單，就是去學(xué)習(xí)它的API，多看實(shí)…

在本文中，我不會(huì)去談 React、Angular、Vue 等等這些大的前端框架，也不會(huì)談 Atom、VS code、Sublime 等等這些已經(jīng)很出名的代碼編輯器，我只是想簡(jiǎn)單的分享一套我認(rèn)為有助于提升開(kāi)發(fā)者工作流的工具集。

本文思維導(dǎo)圖，歡迎補(bǔ)充 本文首發(fā)于我的個(gè)人網(wǎng)站：http://cherryblog.site 前言 溫馨提示：本文較長(zhǎng)，圖片較多，本來(lái)是想寫一篇 CSS 布局方式的，但是奈何 CSS 布局方式種類太多并且實(shí)現(xiàn)方法太多，所以本文主要是介紹 flex 布局和 grid 布局，以及 C…

這是一篇萬(wàn)字長(zhǎng)文, 系統(tǒng)梳理了ajax相關(guān)的知識(shí)體系, 幾乎囊括了所有ajax的知識(shí)點(diǎn). 內(nèi)容包含瀏覽器單線程機(jī)制，xhr對(duì)象，多框架ajax，F(xiàn)etch，CORS，緩存，調(diào)試技巧等等

CSS 布局經(jīng)典問(wèn)題初步整理

本文主要對(duì) CSS 布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)lexbox 布局，等等。

前言 三月中旬的時(shí)候，有一個(gè)對(duì)于 CSS 開(kāi)發(fā)者來(lái)說(shuō)很重要的消息，最新版的 Firefox 和 Chrome 已經(jīng)正式支 CSS Grid 這一新特性啦。沒(méi)錯(cuò)：我們現(xiàn)在就可以在最流行的兩大瀏覽器上玩轉(zhuǎn) CSS Grid 啦 ~(≧▽≦)/~ 為什么 CSS Grid 很重要？ …

通過(guò)四個(gè)問(wèn)題引出移動(dòng)適配的解決方案，這一節(jié)主要講解了寬度單位 rem。

關(guān)于 UI 設(shè)計(jì)中用色技巧和配色工具推薦

本文樣式代碼采用 SCSS。 那么多的文章講了響應(yīng)式的網(wǎng)站如何布局，使用 CSS 如何實(shí)現(xiàn)，如何 Blah Blah 的。但是，我們都忘了很重要的一點(diǎn)——對(duì)字體大小的響應(yīng)式控制。 現(xiàn)在的很多網(wǎng)站，從布局上來(lái)說(shuō)，盡管是響應(yīng)式的(當(dāng)然，或許可以說(shuō)成所謂響應(yīng)式的)。但是，從字體上來(lái)說(shuō)…

寫在前面： 在網(wǎng)頁(yè)制作中，雪碧圖也是前端攻城獅必須掌握的一項(xiàng)小技能。百度詞條對(duì)雪碧圖的解釋是：CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來(lái)顯示需要顯示的圖片部分。本文主…

在移動(dòng)端開(kāi)發(fā)中，并不是所有的瀏覽器，webview，微信等各種版本都支持標(biāo)準(zhǔn)的 flex，
但是基本上都會(huì)支持 - webkit-box，所以 flex.css 的主要作用是保證每一個(gè)屬性都能支持標(biāo)準(zhǔn) flex 或舊版本的 - webkit-box。
由于 flex.css 采用了 autoprefixer 編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn) flex 布局的情況下，
回滾到舊版本的 - webkit-box，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。
于是，一款移動(dòng)端快速布局的神器誕生了...

rem 的官方定義『The font size of the root element.』，即以根節(jié)點(diǎn)的字體大小作為基準(zhǔn)值進(jìn)行長(zhǎng)度計(jì)算。一般認(rèn)為網(wǎng)頁(yè)中的根節(jié)點(diǎn)是 html 元素，所以采用的方式也是通過(guò)設(shè)置 html 元素的 font-size 來(lái)做屏幕適配，但實(shí)際情況真有這么簡(jiǎn)單嗎？

最近整理的前端面試題，希望能對(duì)大家有幫助。轉(zhuǎn)載自：http://www.jianshu.com/p/3944...

頁(yè)腳置底（Sticky footer）就是讓網(wǎng)頁(yè)的 footer 部分始終在瀏覽器窗口的底部。這樣的布局隨處可見(jiàn)，偶然看到 CSS-TRICKS 上介紹頁(yè)腳置底的文章覺(jué)得不錯(cuò)，對(duì)開(kāi)闊布局的思路挺有幫助，遂譯之。

最近有很多關(guān)于 Progressive Web Apps（PWAs）的消息，很多人都在問(wèn)這是不是（移動(dòng)）web 的未來(lái)。我不想陷入native app 和 PWA 的紛爭(zhēng)，但是有一件事是確定的 --- PWA極大的提升了移動(dòng)端表現(xiàn)，改善了用戶體驗(yàn)。 好消息是開(kāi)發(fā)一個(gè) PWA 并…

最近把移動(dòng) WEB 適配相關(guān)的問(wèn)題梳理了一遍，學(xué)習(xí)了幾篇文章，其中

從網(wǎng)易與淘寶的 font-size 思考前端設(shè)計(jì)稿與工作流 - 流云諸葛 - 博客園

分析了網(wǎng)易和淘寶對(duì)移動(dòng) WEB 適配問(wèn)題的解決方案，干貨不少，但是一些概念和思路不是很清晰。我在這里結(jié)合一些其他的文章和自己的實(shí)驗(yàn)思考對(duì)兩種適配方案再做分析，順便把相關(guān)的知識(shí)點(diǎn)做個(gè)總結(jié)。

作者：吳成琦
鏈接：https://zhuanlan.zhihu.com/p/...
來(lái)源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

2017-11-25 更新：5. 使用 Gulp 拼合圖片 1. 單個(gè)頁(yè)面內(nèi)容不能過(guò)多 設(shè)計(jì)常用尺寸：750 x 1334 / 640 x 1134，包含了手機(jī)頂部信號(hào)欄的高度。 移動(dòng)端H5活動(dòng)頁(yè)面常常需要能夠分享到各種社交App中，常用的有 微信、QQ 等。 使用移動(dòng)設(shè)備查看…

說(shuō)起 flexbox，都算是件陳年舊事了，它是 2009 年 W3C 提出的一種全新的可伸縮的 CSS 布局方式。依賴 flexbox，我們可以更簡(jiǎn)單，高效的完成可伸縮式頁(yè)面的布局。