你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹。
我已经将这 5 种场景的实现封装成 npm 包，npm 包地址：https://www.npmjs.com/package/react-masonry-component2，可以直接在 React 项目中安装使用。
今天移动web开发学完了，整理一下思路，移动web首先学习的就是就是flex布局。记录一下flex布局和移动适配的一些知识。
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
具体来说，有的屏幕320px宽，有的屏幕640px宽，有的更宽，如果你写固定px，那么要么小的放不下，要么大的有大片空白。
我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。
1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；
weex 常用的两种布局 分别为 flex弹性布局 和 绝对定位布局 一般情况下都是这两种配合使用!
HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表。比如，一个页面在屏幕上显示时使用无衬线字体，而在打印时则使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性，扩展了媒体类型的功能。
整理自 MDN web docs 的笔记，同时参考了 Web Bos 上的什么是 Flexbox系列视频。
很多人会对响应式布局和自适应式布局产生混淆，这两者到底有着什么样的区别呢？因为不同于移动站，就事一个独立的站点，每个模块都有独立接口，但是Google一直以来就是推荐响应式设计的，至于为什么你可以参考此篇文章：移动端网站怎样做SEO优化？我们今天就来了解下二者之间是责骂定义的。
对比总结一下热门的解决方案 通过媒体查询的方式即CSS3的 @media 天猫首页使用的 flex 弹性布局 淘宝首页使用的 rem+viewport缩放（Flexible.js） hot.css ---- ####@media媒体查询 使用方法: @media screen and (max-width: 600px) { /当屏幕尺寸小于600px时，应用下面的CSS样式/ /你的css代码/ } 优点: 移动端和PC维护使用同一套代码时，方法简单，成本低。 可以通过-webkit-device-
rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em。
在用前端给移动端页面写布局时，我接触到了Rem布局，但是老实说我也看了几篇手淘适配的文章，并且主要的目的是拿到代码写出demo，所以对于Rem我还是停留在只会使用的阶段，但是理解的并不透彻，所以要抽出时间，把rem布局的原理搞清楚。
今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。
CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。
编译模式：自定义组件模式，这个默认自动设置的。这方面比较复杂，曾经的叫非自定义组件模式官方不在支持。
圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。
自从图形界面操作系统问世以来，之上的应用软件基本都会绘制界面，这也是用户使用软件的接口，叫做 UI （user interface）。涉及到用户体验、设计、具体界面的开发，是软件中和用户最近的一部分，也是多个职能的岗位交集最多的部分。
1.菜单悬停效果的展示 一些菜单链接悬停效果为您的灵感。由CSS和JavaScript为单个字母动画提供支持。今天，我们希望与您分享一些菜单悬停效果。我们希望这一套启发你，并为你的下一个项目提供一些想
一直忙于工作，也没时间总结。现在有点零散时间把之前做的笔记整理一下。 目前项目使用的技术栈是,前端UI框架Ant Design Pro，数据交互使用react,后端使用的是springcloud,离线存储数据使用hadop(刚搭完还没开始用).后端的技术栈世面上基本稳定都用微服务这套，因为spring全家桶一直非常稳定。 Ant Design Pro目前蚂蚁金服和阿里巴巴内部上百个项目正在尝试 Pro 的研发模式 1.安装node和git 2.从 GitHub 仓库中直接安装最新的脚手架代码。
新的一年加入新的公司，新的公司做新的项目。公司涉及到的项目基本都是海外的，没有国内的。做过国际化项目的同学应该知道，世界上每个国家的风俗习惯都不同。对于前端开发来说，就网页布局这方面就有正常的ltr布局，即：从左往右布局。但是在一些国家，比如阿拉伯，希伯来等国家，却有着和我们不一样的习惯，遵从了我们老祖先从右往左的阅读习惯，文字也是从右往左书写的习惯，当然是看不懂的。站在前端的角度就是rtl布局。
上篇文章聊了下vue源码中的生命周期。有时候我觉的看源码其实是在浪费时间，今天聊一下css中的BFC和今天看的Vue里的一个比较有意思的函数。
前端开发学习每个人都想走捷径，即想高效快速学习又想掌握当今最新的前端技术知识。其实，这样的想法是对的，找对学习方法就能达到这个效果。前端开发学习每个阶段都是非常重要的，一部分为专业知识、另一部分实战经验也非常重要，平时不但要仔细研究基础又要多练代码，通过几个月的系统学习，相信大家都能成为前端开发大师。下面来介绍下如何能提高CSS编写技巧，提高工作效率。
AntUI 是蚂蚁金服无线 H5 样式库，是对外开放的一套支付宝 App 视觉交互规范。旨在帮助用户快速完成 H5 页面开发，并提供给用户在支付宝 App 内一致的体验；
虽然有时确实会让我们花蛮多时间去实现，但从一方面想这也是个机会，让我们更深入了解的浏览器布局方式。
大家好，今天我将和大家一起动手做个练习，使用 Flexbox 布局创建一个响应式的表单，本篇文章不会和大家生硬的去介绍 Flexbox 知识点，而是通过实践的形式去理解 Flexbox 布局。刚学前端时，大家会不会觉得CSS太容易了，没有过多实践，就开始上手实践JS和相关的前端框架了，一遇到一些样式的问题，就开始慌了，无从下手。CSS学好用好，也是需要花功夫的，不要因为CSS简单了，就轻视了，毕竟作为一个专业的前端，要给大家呈现产品美感，更多考验的是 CSS 的功底。
大家好，今天我将和大家一起动手做个练习，使用 Flexbox 布局创建一个响应式的表单，本篇文章不会和大家啰啰嗦嗦的介绍 Flexbox 的知识点，介绍多了我也犯晕。而是通过实践的形式去理解 Flexbox 布局。
Taro 是一套遵循 React 语法规范的跨平台开发解决方案，但是目前当我们使用 Taro 的时候，在不同平台上的开发体验还有不一致的地方，所以我们也都期待有一套跨平台统一的解决方案，能够以最小差异的方式向开发者提供更好的开发体验。
htmlreference.io 是 HTML 的免费参考查询网站。每个 HTML 元素和属性都按字母顺序列出，以提高您的理解，并提供适当的示例。
前几年，很多人看到IT行业越来越火，就想转行成为程序员。那时候转行还是很简单的，不一定要掌握很多技术知识，如果你是前端人员，甚至会写个静态页面就可以去应聘了。但现在，这样的“好事”越来越不好找了，很多毕业生面临着一毕业就失业的情况。然而，市面上饱和的大多数是初级的职位，对于中高级开发工程师，企业还是很欢迎的。
一套适用于手机、iPad 和 PC 的代码。每次加载不同的样式时，它们都能在一个项目中兼容。这就是所谓的响应性。然后，我希望产品经理能多考虑一下。我不想做了设计工作，最后却说它不好看，因为我不会做设计。
本章主要介绍常见的布局实现，包括： ---- [1] 两列布局 [2] 三列布局 [3] 弹性 (Flex) 布局 ---- [1] 两列布局 子列固定宽度（设置 absolute、float），主列自适应屏幕（调整margin）。 有 absolute + margin、float + margin、float + 负margin 等方式。 <!DOCTYPE html> <html> <head> <title>两列布局</title> <meta charset="utf-8">
width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orientation：检查设备处于横向（landscape）还是竖屏（portrait）
缓存：ETag Expire Last-Modified 三者合用，Expire 可以让浏览器完全不发起 Http 请求，若 F5 发起请求，也可以通过判断 ETag（对应浏览器字段 If-None-Match） 和 Last-Modified （对应浏览器字段 If-Modified-Since）字段是否需要更新资源还是使用 304(Not Modified) 的本地资源；
这里总结一下 WEB 前端面试的常见问题，同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工程师是必须掌握本文列出的这些知识的，资深工程师则要对这些基本概念的纵向深度进行挖掘（作者：YHSPY）。
BootStrap 目前已经出了 4 个版本，每个版本都有对应的官网教程，先来看看不同版本里的宣传语：
本文主要介绍了响应式设计的入门知识，包括媒体查询、弹性图片和弹性字体、媒体类型、断点、响应式图片、响应式布局、设备像素比、浏览器兼容、媒体查询的兼容性等。
由于小程序开发需要一定的基础，这些基础需要提前掌握，本教程只对小程序开发进行零基础说明。
前端基本内容概述 HTML HTML(超文本标记语言)是一种用于创建网页的标准标记语言. CSS CSS(层叠样式表)是一种用来为结构化文档添加样式的计算机语言. JavaScript JS(JavaScript): 一种高级的，解释执行的编程语言. 解释型语言: 将代码一句一句直接运行, 不需要像编译语言经过编译器先行编译为机器码之后再运行 ES6 ES6(ECMAScript6)是新版本JavaScript语言的标准. AJAX AJAX: 用 JavaScript 执行异步网络请求. AJAX的优点:
手Q天气是在手Q 6.0版本以上新增的功能，页面会展现当天的气温情况，已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果，天气页面会根据8种不同的天气信息，展现相应的天气动画。如下雨下雪，飘云，日光闪烁等动画效果。
1、Web 前端开发环境的配置，HTML 常用的标签，常用表单元素，Table 布局，CSS 样式表，DIV+CSS 布局。可以熟练运用 HTML 和 CSS 样式属性完成页面的布局和美化。
小时候我记得有个软件叫做金山打字通，里面有个打字的飞机大战不知道有没有小伙伴玩过，当然我整不来他那么优秀，我只能做一个较为简单的（「低配版」），低的好像还真挺低。
依稀记得童年时期，站在电视机傍边，和自己的小伙伴玩小霸王学习机的情景。时间如白驹过隙，现在小伙伴的孩子都会打酱油了，而自己为了生活和梦想依旧在奋斗。怀念青春，就写了这样的一个小游戏。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
