董懂 发布的文章

前言

由于移动端屏幕的像素密度都非常高，css中的1px呈现在屏幕中，往往不止1个物理像素，看起来比较粗，设计师很难满意。这和devicePixelRatio有关。
用transform实现看起来比较细的边框是一个很简单的方案，在移动端兼容性也非常好，不需要多余的资源，当然，肯定要多些几行代码。

- 阅读剩余部分 -

最近由于更换了大王卡，而手机QQ浏览器上网免流量，于是便开始使用手机QQ浏览器。一段时间后，感觉它的用户体验不是很好。

想听FM不能关闭

每当打开有音频的网页，想听FM就自动跳出来，当你离开这个页面时，音频可能还会继续播放，可能会中断，什么时候继续播放或者中断，我现在还没发现规律，可能QQ浏览器开发文档提供给了网页开发人员相应的接口吧，但QQ浏览器没有提供彻底关闭它的设置项。如果你要暂时关闭页面中想听FM的图标，也是没有快捷的关闭方法的，需要点击图标进入想听FM的页面，然后再点击页面上部的X，而这个页面是有很多推荐和广告的。如果不是大王卡用户，长期积累，可能就会花费比较多的流量。

- 阅读剩余部分 -

1、前言

今天要开发类通讯录的可滑动字母索引效果，搜遍了百度也没找到相关的代码，都是只能点击，不能滑动。
其实这个功能不难实现，各位大神应该是不屑提起。这篇文章只是作为记录，如果能给初学者带来一点帮助就更好了。

2、先上效果图：

test.gif

- 阅读剩余部分 -

1、defaultValue

HTML
<input type="text" value="Hello world">

JavaScript
const input = document.querySelector('input');

console.log(input.value);        // 'Hello world'

input.value = 'New value';

console.log(input.value);        // 'New value'
console.log(input.defaultValue); // 'Hello world'

如代码所示，当用JavaScript改变了input的value后，可以使用defaultValue来获取这个元素的初始值。

- 阅读剩余部分 -

在线演示：

Demo for article: SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio

以下内容都是基于preserveAspectRatio为默认状态时的情况，也就是不考虑preserveAspectRatio。

为什么设置viewBox的min-x, min-y后，如果设置的是正值，图像反而会向左/上移动，而设置负值则向右/下移动呢？
我是这么理解的：

  1. viewBox的左上角总是和视窗的左上角对齐。
  2. 在设置viewBox的min-x、min-y后，
    1. 首先，图像的位置并不会移动；
    2. 如果设置的为正值，viewBox的起点就会向右/下移动；
    3. 由于图像位置不变，还是基于视窗的左上角，所以图像会被裁切。如果设置的是负值，就相当于PS中扩展画布，左/上会填充空白。
    4. 之后，viewBox的起点会移动到视窗的原点位置，所以，如果设置的值是正值，图像就会被裁切，而如果设置的是负值，就会发现图像左左侧/上侧填充了空白。
    5. viewBox起点与视窗的起点对齐，这时候就出现了文章开始让人疑惑的现象。

这里有张鑫旭的文章，讲解的非常透彻
理解SVG viewport,viewBox,preserveAspectRatio缩放 张鑫旭

  2. 1
  3. ...
  4. 7
  5. 8
  6. 9
  7. 10