HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端

寻根溯源话布局 一切都始于这样一个问题：怎样通过 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，我们可以更简单，高效的完成可伸缩式页面的布局。