再谈移动端适配

发表于 ，标签： 移动端 CSS Javascript HTML

引言 移动端适配一向是很令人头大的问题，因为随着移动设备型号数量的爆发式增长，手机屏幕尺寸越来越多样化，网页内容自适应屏幕尺寸进行显示的需求也就越来越强烈。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。 像素基础 像素 像素是一个老生常谈的问题了。不论是做前端开发还是做UI设计，都离不开这个话题。其实真要深究起来，像素是一个十分复杂的概念。追溯到上世纪6、70年代，计算机的输出设备还是点阵式打印机，如何使打印机打印出文字和图形？科学家们研究出了很多点组成的阵列，通过控制每一个点的黑白，最终组成文字和图形。现代计算机的显示器也借鉴了这个设计，发明了像素。 像素分为两种： 物理像素 又称设备像素(Device Pixel, DP)，这是组成显示设备的最小单位。可以理解为显示器上的一个一个的点，这些点组成一个个阵列。因为这些点间隔太短，排布太密集，所以肉眼观察不到颗粒感，物理像素通过RGB显色系统，分别控制RGB三基色通道的明与暗，形成了各种颜色。这就是所谓的视觉欺骗效果。任何显示设备的物理像素的数量都是不变的，出厂前就已经设定好。 物理像素的单位是pt，计算公式为： 1pt = 1 / 72 inch 设备独立像素…

VueJS组件库爬坑记 (4) - 基于官方文档制作模态框

发表于 ，标签： HTML Vue.js NodeJS Webpack

开篇序在家园工作室已经有半年之久了，在这期间，我学会了很多实用的技能。曾经认为很难驾驭的Vue.js，到现在已经能够很熟练地用它开发大大小小的项目。不久之前，我加入了云家园项目组，开始正式参与云家园项目的研发与维护。在此期间，我浏览了一遍云家园的前端代码，发现整体的架构还是相当复杂、庞大，并且过于繁冗。我参考了云家园项目中Bootstrap的引入方式与使用方式，发现项目中基本没有出现可复用组件（当然，也有一部分的组件是几位先辈封装的），但是Vue组件化的概念并未贯彻整个项目的代码中。于是我萌生出想要开发一个属于家园工作室自己的可复用的UI组件库的想法。这个想法提出来，有两位学长表示他们早就想做这个，然后用这个UI组件库去重构云家园的前端代码。所以我们三人在3天前的3月21日开启了制作一套基于Vue.js 2.0的UI组件库之旅。从这片文章开始，我将会记录我们在开发这套UI组件库中遇到的种种困难与解决这些问题的方案。实践性的内容将占到绝大部分，也有少部分偏理论的内容。我们可以将这个系列的博客理解为从零开始开发Vue.js组件库到其初具雏形再到其羽翼丰满的全过程的记录，一颗牙当作经验的积累。简介这片文章主要记录了基于Vue.js官方文档中关于模式组件而开发的一个模态框组件的过程。开发过程代码分析根据官方文档，一个受推荐的模式组件的代码应当形如下面：进一步观察发现，官方提供Demo在技术上具有如下特性：采用v-if控制模态框的显示与隐藏，而不是国内某些UI组件库普遍采用的v-model采用<transition>控制模态框的过渡动效采用Div编写模式组件，而不是常用的iframe组件内采用$emit回传动作信息（…

寒假比赛总结（八） - 比赛总结

发表于 ，标签： CSS HTML Vue.js Javascript Less

前言到今天(2018-03-01)20点，为期一个多月的寒假比赛就结束了。按照惯例，每次比赛结束都写一些总结，把比赛过程中学到了什么、有哪些地方做得好的、哪些地方没做好的都记录一下。也可以当作反思。在比赛中吸取经验，这样会成长得更快。学到了什么规范的操作无论做什么事情，规范是必需遵守的。在比赛时，为了更好地与后端进行合作，我从前端页面的角度制定了一篇文档，在上面详细描述了每个页面所需接口的字段名、方法等等。(这篇文档目前还在：http://docs.lenconda.top/petlog/)在实际的操作中，我前端这边是严格按照文档规定的格式编写调用后端接口的逻辑。然而，后端似乎并没有认真按照这篇文档的规范进行编写：很多接口都是规定GET方法，后端却只允许POST方法；有很多接口的字段存在拼写错误(avatar拼成avater、字段名中少了s或多了s、follow漏了ed(原本是followed)等等)，给前后端对接交互造成很大的麻烦，也浪费了很多时间(我们从2月26日开始对接，到2月28日修改完Bug进入预备阶段，前后花了两天的时间)，而且后端接口初次测试十有八九都是500，这些500中肯定有很多是没有遵守规范造成的。这件事给我很深的感触，我认为前后端分离的开发模式下，规范一定是要严格遵守的东西。但是就我这次和两位后端的合作过程来看，家园的研发培训时并没有强调规范的重要性，或者说家园研发的新生并没有很强的规范意识，…

寒假比赛总结（七） - 各种坑

发表于 ，标签： CSS HTML Javascript

前言在开发的过程中遇到了一些奇妙的坑。与其说坑，倒不如说自己以前从来没有遇见过或者考虑过这些东西。甚至其中某几个还曾一度被我认为是Bug。在查阅资料后发现那种设计还是有其道理的。1. 关于伪元素在比赛中用到伪元素的地方不多也不少，其实我认为伪元素的出现给开发带来了很多方便，代码也变得很干净整洁。因为伪元素并不是真正的元素，却又和真正的元素没什么差别。但是，伪元素也有其限制。现有需求如下图：因为头像右下角的相机在样式上是不变的，所以首选应该就是伪元素。于是我开始编写此代码：HTML:<img src="avatar.png" /> img { width: 83px; height: 83px; border-radius: 50%; position: relative; &::after { content: ''; position: absolute; bottom: 0; right: 0; display: block; width: 22.5px; height: 22.…

寒假比赛总结（六） - 关于使用到的一些从未遇见过的东西

发表于 ，标签： HTML Javascript CSS

前言此文章用于记录在寒假比赛的过程中遇到的一些需求及其解决方法。主要涉及到之前工作学习的过程中未遇见过的技巧。既是为了复现一遍以增强理解，也为了在以后需要的时候能够随时记起。1. 自定义单/复选框HTML单/复选框是由类型为Radio的Input元素实现的，但是这个类型的元素会形成一个小圆圈/小方框，并且随浏览器样式的不同而不同。如果需要自定义这些组件，我的解决方法是将Input元素本身隐藏起来，然后在外层添加一个<label>元素包裹Input，再添加一个Input的兄弟元素，这个兄弟元素就是自定义的，用于表示该组件被选中与否的元素。以下列出代码：HTML:<label> <input type="radio" v-model="value" value="value1" style="display: none" /> <i class="indicator"></i> </label> LESS:…

寒假比赛总结（五） - 基于现有解决方案实现背景虚化

发表于 ，标签： HTML Javascript CSS SVG

前言我对目前比较成熟的背景虚化方案还不是很熟悉，但是这次比赛项目需要用到这个功能，具体体现在使用虚化的用户头像当作头像展示的背景，类似于下图：采用这种方法的好处就是在保证大体美观的情况下减轻研发量(因为减去了用户上传背景图片的功能)。解决方案1.基于CSS3的高斯模糊滤镜此方案具体实现就是类似于实现毛玻璃特效的blur()滤镜，通过叠加背景图片达到高斯模糊效果。此方案我最开始是在Lea Verou所著的《CSS揭秘》一书中发现的，并且作者最初也是为了实现毛玻璃特效使用了高斯模糊。之所以认为它可以用于实现这个需求，是因为其本质是背景图片模糊。过程建立一个容器，宽高指定，指定所需背景图片：HTML<div class="head-wrapper" :style="{background: `url(../../../static/images/${this.avatar})`}"> Less.head-wrapper { min-height: 161px; height: auto; width: 100%; position: relative; background-repeat: no-repeat !important; background-size: 80% !important; background-position:…

寒假比赛总结（四） - 重新认识'router-link'

发表于 ，标签： HTML Vue.js Javascript CSS

前言接触Vue.js的时间有半年了，正式将Vue.js用于项目开发也有将近三个月了。Vue中有个<router-link>的东西比较有意思，这个组件里有很多很有意思的小细节当时没注意到，不过比赛项目正好又要用上这个东西。一个看似不起眼的需求我们的比赛项目采用的布局是目前流行的APP布局，即：顶部一个Panel，中间是内容，底部是一个两个或两个Logo以上的Tabbar，用于不同功能之间的切换。而问题出在这个被激活的Tabbar元素上：这个匹配到当前路由的Tab需要被点亮，就像下图：因为我这边Tabbar采用的是Flexbox布局，然后每个元素用一层<router-link>包起来，然后分别跳转到各自匹配的路由上去。但是如何将匹配到的Tab点亮呢？？绞尽脑汁想了很久，还是没有一个比较完美的解决方案，期间想过Vuex，想过在data中绑定，但是每个想法都十分麻烦。发现ActiveClass突然想起一个月前在观看慕课网上一个Vue.js高仿饿了么的视频，里面貌似用过这个东西，好像是顶部的Tabbar，也是匹配了不同的路由，当点击其中一个时，文字变红，底部多了一个红色的下划线，切换另一个时，另一个变成上述状态，先前那个恢复原状。于是赶紧翻开视频，发现讲师演示代码的时候没有过任何与之相关的代码编写，当其在Chrome中展示的时候，发现被激活的Tab的<a&…

寒假比赛总结（二） - 解决前后端分离模式下前端与后端文件交互的问题

发表于 ，标签： HTML Javascript

前言我所在的产品项目组的核心功能就是图片上传，但是同时在用户发布之前还能删除任意图片。之前我已经了解到input的File List对象是只可读，不可写的。这就让我十分尴尬，想了很多办法，包括克隆数组，删除图片就标记一下，甚至是通过将图片Base 64编码直接放进数组里显示（实践证明如果图片太大，其Base 64编码也会非常非常长，长到一种无法想象的地步，此时浏览器也将会行走在崩溃的边缘QAQ），等等，一周前又需要修改图片的方向，所以上传时仅仅依靠input的FileList对象时完全不靠谱的。于是我又参考了其他大神的作品，发现其中很多人采用了Blob URL来展示图片。关于Blob引用MDN上对Blob构造函数的阐述：Blob 对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。File 接口基于Blob，继承了 blob的功能并将其扩展使其支持用户系统上的文件。Blob类型通常用于处理大文件，同时提供一个URL，指向浏览器内存中的某个文件，并且具有和普通文件一样的接口。如何与后端接口进行交互于是我想到直接将Blob URL传给后端，但是后来发现这个URL只对浏览器当前标签页有效，所以直接将这个URL给后端时绝对不可行的。这个方法展示图片虽然能很简单地执行修改和删除，但是如何传给后端却是个很大的问题。经过几番查找资料，终于在StackOverflow上找到了一个能解燃眉之急的方案：https://stackoverflow.com/questions/14952052/convert-blob-url-to-normal-url这个问题被采纳的答案中有这么一句话：It is…