寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存…

最简单实用的 Flex 布局教程，30 分钟让你学会 Flex 语法基础。

这其中，因 bootstrap 的原因，我们对响应式布局绝对是很熟悉的，它的栅格系统就是使用了响应式布局方案。 那么静态布局，也是我们经常使用在 PC 当中，但是随着科技的发展，越来越多的屏幕大小，以至于静态布局再也满足不了我们需求了，这时候自适应布局就出来了，根据不同尺寸和设…

1. 首先我们先介绍当下的长度单位 2. 移动端的布局 可以看到百分比布局能自动适应屏幕宽度。 为了更好的使用rem,这里1rem等于屏幕宽度的10分之1。注意不能做到1rem==屏幕的百分之1。因为浏览器的最小font-size是12px; 可以看到宽度和高度都能按百分比变化…

因为项目需要，vue开发项目，必须将已写的以px为单位的部分，转换为rem。要是全部转换，这大量的计算量，哪怕是sublime Text 的cssrem插件，也是一个庞大的工作量。所以，直接使用插件没商量。

在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必…

1. 视口 viewport viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏…

flexible布局是淘宝团队开发移动版时为了适配各种大小不一的手机屏幕采用的方案。 现在的手机换代速度真是让我们这些开发人员汗颜啊。要做的适配实在是太多太蛋疼了。而本人参加工作接到的第一个任务就是做一个页面要求适配所有的手机设备，在PC端浏览的时候要像微信文章一样两边留空固定…

本文主要针对初学移动端web开发的读者，笔者也是初学者，文中有众多用词不当之处望读者指正。 从开始做web app开发到现在，一直对移动端的尺寸适配有一种模糊的概念。能说得上来‘媒体查询’，‘栅格化布局’，‘流式布局’等若干技术名词和实现方式，但是每次自己做web app开发的…