随笔分类 - html/css
摘要：本文主要介绍一种全新的前后端合作模式，在介绍这种模式之前咋们先来看看前后端合作模式的演变。 singsong：该模式主要对传统多页面应用构建的改进。关于 SPA（Single Page Application，单页应用程序）可以参考 SRR（Server-Side Render，服务端渲染）。 演变
阅读全文
posted @ 2020-11-20 16:42
酷儿q
摘要：什么是 Socket？ Socket 的中文翻译过来就是“套接字”。套接字是什么，我们先来看看它的英文含义：插座。 Socket 就像一个电话插座，负责连通两端的电话，进行点对点通信，让电话可以进行通信，端口就像插座上的孔，端口不能同时被其他进程占用。而我们建立连接就像把插头插在这个插座上，创建一个
阅读全文
posted @ 2020-11-20 16:39
酷儿q
摘要：之所以写这个总结，还要从上周的一次移动端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。WTF（手动黑人问号）！！！那问题就来了，开
阅读全文
posted @ 2020-11-20 16:38
酷儿q
摘要：html5语义元素 语义学是研究语言中单词和短语的含义。语义元素=具有意义的元素。 语义元素清楚地描述了它对浏览器和开发人员的意义。 非语义元素的示例：<div>和<span>- 对其内容一无所知。 语义元素的示例：<form>，<table>和<article>- 清楚地定义其内容。 所有现代浏览
阅读全文
posted @ 2020-11-20 16:34
酷儿q
摘要：每个市场都受到某些常见概念的制约，JavaScript 也不例外。 产品生命周期就是其中的一个概念，它可用于多个不同的环境，用以了解和预测产品的行为。这是一个商业概念，能够帮助我们了解产品在其生命中经历的阶段，并解释这些阶段对其受欢迎程度的影响 —— 在大多数情况下以销售情况来体现。可以通过观察市场
阅读全文
posted @ 2020-11-20 16:33
酷儿q
摘要：问题症状 今天在开发一个移动端的 H5 页面时，遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状： 页面结构 出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的结构，用于用户填写邮寄信息。类似: <div> <input type="text" p
阅读全文
posted @ 2020-11-20 16:31
酷儿q
摘要：一直以来，可视化 Bug 跟踪工具都能帮助开发人员加速构建 Web 开发项目。因此作者在对大量的 Bug 跟踪工具进行了研究后，特别针对 Web 开发人员和设计人员列出了十大 Bug 跟踪工具。 在当今数字技术时代，网站和网页设计受到了个人及企业的极大追捧。Web 开发人员正致力于在网站中使用嵌入技
阅读全文
posted @ 2020-11-20 16:28
酷儿q
摘要：单位选择: vw 还是 rem ？ 我们选择了 rem 作为像素单位。因为本次开发的项目包含 ipad 与手机端，使用 rem 单位应对的根元素字体可以根据设备动态设置。因此 ipad 端与手机端公共的样式只需要写一套代码就能实现，而使用vw作为单位在无论什么情况下都需要写2套样式，见下面的例子：
阅读全文
posted @ 2020-11-20 16:26
酷儿q
摘要：有时候，我们一进入页面，就需要获取display为none元素的物理尺寸（宽高），或获取display为none元素的子元素的物理尺寸（宽高），本篇文章就如何解决以上问题给出自己的解决方案，获取display为none元素的子元素的物理尺寸。 方案一： 1、利用给元素添加行内样式：display:b
阅读全文
posted @ 2020-11-20 16:19
酷儿q
摘要：团队开启了一个新项目，希望能在原来项目的工程化基础上再进一步，于是想到了图片自动压缩。这里的图片自动压缩并不是在webpack构建阶段压缩，而是在git commit的时候进行。 pre-commit pre-commit 是git hook 众多钩子中的一个，在每次 git commit 前执行，
阅读全文
posted @ 2020-11-20 16:17
酷儿q
摘要：在这篇文章中，我介绍了一些编程时尝试使用的模式。这些模式是多年来我自己在工作中实践的结果，也有是从同事那里偷偷学到的。这些模式没有特定的顺序，只是一个简单的集合。 提前退出（early exits） function transformData(rawData) { // check if no d
阅读全文
posted @ 2020-11-20 16:06
酷儿q
摘要：如今，Android 和 iOS 是市场上最受欢迎的两大移动平台。很多企业都在寻找方法来构建能同时支持两大平台并满足用户需求的应用。 在两大平台统治市场的背景下，跨平台应用框架也随之崛起。这些框架对于开发人员和企业来说都大有裨益，他们可以在这些框架的帮助下更容易地开发出同时支持两大平台的应用。 移动
阅读全文
posted @ 2020-11-20 16:05
酷儿q
摘要：小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位，在绘制内容时所应用的单位仍然是 px，那么如何实现不同尺寸屏幕的自适应呢？ 我们的在开发中常用的参考屏幕尺寸（iPhone6）为：375*667； 那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例
阅读全文
posted @ 2020-11-20 16:03
酷儿q
摘要：我同 css 打交道已经有几年了，每当需要就会用到它。最近我想明白了一个问题，那就是为什么做好 css 样式如此之难。如果你一直都在 CSS 中苦苦挣扎，你要知道自己并不是一个人。本文就是要告诉你为什么 CSS 这么难，并且搞不明白它也不是开发者的错。 示例问题 比如说我有了下面这个 CSS 类，它
阅读全文
posted @ 2020-11-20 16:01
酷儿q
摘要：一：基本知识缩影 1.css样式表的基本概念 2.样式表基本类型 1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部样式 3.样式表配置方法 4.字体属性 1.font-family 2.font-size(四种尺寸方式：绝对尺寸（xx-small。。。medium。。xx-large7种），
阅读全文
posted @ 2020-11-20 16:00
酷儿q
摘要：最近由于工作的原因碰到一个问题，就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示，思考许久未找到合适办法，于是在网上找到一些办法在此总结记录下来方便以后的学习。 方法一：兼容IE67，但是当元素宽度大于50%时，会出现滚动条。 <div class="father"> <div class="ch
阅读全文
posted @ 2020-10-19 17:32
酷儿q
摘要：box-shadow属性是一个css3属性，允许我们在几乎任何元素上来创建阴影效果，类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度（第三维）的错觉。 定义和用法 box-sizing属性定义了如何计算元素的宽度和高度：它们是否包括填充和边框
阅读全文
posted @ 2020-10-19 17:29
酷儿q
摘要：viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 这个是移动端页面开发必备的标签，用来调整布局视口同视觉视口一致，禁止
阅读全文
posted @ 2020-10-19 17:28
酷儿q
摘要：高度坍塌 成因 父元素 div 未设置高度 子元素全部设置浮动（float: left | right;），浮动元素 脱离文档流 且 不占页面空间 由于父元素为设置高度，高度靠内部子元素撑开，而今子元素全部脱离文档流，所以此时父元素的高度为 0，给父元素和子元素设置 边框（border: 1px s
阅读全文
posted @ 2020-10-19 17:27
酷儿q
摘要：1.温习JavaScript 这些日子，开发人员掌握JavaScript总不会错。JavaScript能力是目前为止被高层执行人员和招聘人员誉为最频繁的追捧技能。JavaScript已被证明是当今市场中高度可移植和宝贵的技能。 2.了解大数据 大数据项目相较于去年继续扩大，而且在这几年里也没有放缓的
阅读全文
posted @ 2020-10-19 17:26
酷儿q
浙公网安备 33010602011771号