摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端

尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不由得感覺眼前一亮，順理成章的聯想到 Word 文檔排版中用到的的左對齊、右對齊和居中對齊，然而很快就失望的發現 CSS 中并不存…

相信很多剛涉及移動端設計與開發的同學基本上會在前端開發中的像素問題上糾結很久，所以寫下這篇筆記，便于自己日后翻閱。如果有啥理解上的錯誤，歡迎大家指正~

很詳細得講解了移動端 HTML5 遇到的適配問題，原因和解決辦法，非常有用的一篇文章。

遙想去年入前端坑的時候，就很快遇到了移動端頁面的開發，天(er)真(bi)的我立馬上去量設計稿，然后擼起袖子就是干！可是打開調試一看亂套了，先不說布局上的問題，就是大小看起來也不太對啊，太大了！然后就去問老司機，他說尺寸你要除以2才行，我心里挺郁悶的，為啥啊。。當時項目緊，就先…

微信小程序起手式學習 + 實戰演練

本文來自尚妝前端團隊南洋 發表于尚妝 github 博客，歡迎訂閱。 移動端 H5 頁面 rem 縮放方案 flexible.js 兼容 375px 方案的思路 參考： 移動端高清、多屏適配方案 viewport-and-flexible.js flexible.js github 一個新的項目復…

可能是最全的學習 Flexbox 的資源了，希望對大家有所幫助。

flex 是個非常好用的屬性，如果說有什么可以完全代替 float 和 position ，那么肯定是非它莫屬了（雖然現在還有很多不支持 flex 的瀏覽器）。然而在移動開發中，本來絕大多數瀏覽器（包括安卓 2.3 以上的自帶瀏覽器）都支持的屬性，偏偏有個例外，就是國產某某 X5 內核神器（不知哪個版本的 webkit，僅支持 display:box），自主研發這東西也不好多說什么了

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

玩前端也有幾個月了，發現大家普遍混淆了響應式和自適應的概念。

十分鐘就能學會響應式設計

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

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

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

本系列文章為我在深入研究 CSS 的布局方式的過程中的一些總結。主要是對于 CSS3 標準里的 flex 布局方式 CSS 草案中的 grid 布局方式進行一些總結。

前端技術棧更新太快，眼花繚亂，大家一個勁攬過來學習的時候，別忘了回頭看看那些已經掌握的基礎知識。
我肯定不會說這其實是為妹紙寫的重要知識點整理文章...
萬一哪天我就去辦個培訓班呢？

寫在前面：本文主要內容是目前我所知道的切圖技巧結合網上的資料，寫出來分享一波。圖文教程，多圖！！ BB：很多人都會說，切圖這個活倒底分給UI還是分給前端。雖然好的UI會給我們把圖切好，但是他們切的圖不一定百分之百符合我們的需求，所以我一直都覺得這是頁面仔必須要會的一項技能，因為…

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

全面而詳實！

CSS3系列我已經寫過兩篇文章了，在這貼出鏈接，感興趣的同學可以看一下CSS3初體驗之奇技淫巧，CSS3 3D立方體效果－transform也不過如此 第一篇主要列出了一些常用或經典的CSS3技巧和方法；第二篇是一個用CSS3實現的立方體實例，詳細講解了3D旋轉和transfo…

第一次 h5 游戲類活動開發，干貨多多。

百分比，浮動，普通 inline，絕對定位，彈性盒

心心念念的Canvas系列文章經過長時間的整理和沉淀，終于決定動筆啦！我會從最簡單的API開始，逐步深入，再結合酷炫的實例，為大家帶來這一系列的文章，希望大家多提建議，多多鼓勵！^_^激動ing... 好，下面正文開始： 其實canvas本身很簡單，就是去學習它的API，多看實…

在本文中，我不會去談 React、Angular、Vue 等等這些大的前端框架，也不會談 Atom、VS code、Sublime 等等這些已經很出名的代碼編輯器，我只是想簡單的分享一套我認為有助于提升開發者工作流的工具集。

本文思維導圖，歡迎補充 本文首發于我的個人網站：http://cherryblog.site 前言 溫馨提示：本文較長，圖片較多，本來是想寫一篇 CSS 布局方式的，但是奈何 CSS 布局方式種類太多并且實現方法太多，所以本文主要是介紹 flex 布局和 grid 布局，以及 C…

這是一篇萬字長文, 系統梳理了ajax相關的知識體系, 幾乎囊括了所有ajax的知識點. 內容包含瀏覽器單線程機制，xhr對象，多框架ajax，Fetch，CORS，緩存，調試技巧等等

CSS 布局經典問題初步整理

本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Flexbox 布局，等等。

前言 三月中旬的時候，有一個對于 CSS 開發者來說很重要的消息，最新版的 Firefox 和 Chrome 已經正式支 CSS Grid 這一新特性啦。沒錯：我們現在就可以在最流行的兩大瀏覽器上玩轉 CSS Grid 啦 ~(≧▽≦)/~ 為什么 CSS Grid 很重要？ …

通過四個問題引出移動適配的解決方案，這一節主要講解了寬度單位 rem。

關于 UI 設計中用色技巧和配色工具推薦

本文樣式代碼采用 SCSS。 那么多的文章講了響應式的網站如何布局，使用 CSS 如何實現，如何 Blah Blah 的。但是，我們都忘了很重要的一點——對字體大小的響應式控制。 現在的很多網站，從布局上來說，盡管是響應式的(當然，或許可以說成所謂響應式的)。但是，從字體上來說…

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

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

rem 的官方定義『The font size of the root element.』，即以根節點的字體大小作為基準值進行長度計算。一般認為網頁中的根節點是 html 元素，所以采用的方式也是通過設置 html 元素的 font-size 來做屏幕適配，但實際情況真有這么簡單嗎？

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

頁腳置底（Sticky footer）就是讓網頁的 footer 部分始終在瀏覽器窗口的底部。這樣的布局隨處可見，偶然看到 CSS-TRICKS 上介紹頁腳置底的文章覺得不錯，對開闊布局的思路挺有幫助，遂譯之。

最近有很多關于 Progressive Web Apps（PWAs）的消息，很多人都在問這是不是（移動）web 的未來。我不想陷入native app 和 PWA 的紛爭，但是有一件事是確定的 --- PWA極大的提升了移動端表現，改善了用戶體驗。 好消息是開發一個 PWA 并…

最近把移動 WEB 適配相關的問題梳理了一遍，學習了幾篇文章，其中

從網易與淘寶的 font-size 思考前端設計稿與工作流 - 流云諸葛 - 博客園

分析了網易和淘寶對移動 WEB 適配問題的解決方案，干貨不少，但是一些概念和思路不是很清晰。我在這里結合一些其他的文章和自己的實驗思考對兩種適配方案再做分析，順便把相關的知識點做個總結。

作者：吳成琦
鏈接：https://zhuanlan.zhihu.com/p/...
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

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

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