saber酱的抱枕

努力变强

03/28
02:42
学习

Vue.js 待办事项 Todolist 之 2

在线体验 Github

去年我做了个 Vue.js 的待办事项,是 PC 上的样式,现在又做了个待办事项,算是手机上的。依旧可以设置背景。

之前 pc 上的那个,闹钟有兼容性问题,而手机上这个,不再播放音乐来提醒了,改为使用浏览器的通知。但这需要 HTTPS 和浏览器的支持,所以上面的在线体验是没有通知的。

其他详见 GitHub 里的说明~

Vue.js 待办事项 Todolist 之 2

03/12
06:56
学习

flex 布局一列固定宽度一列自适应

占据剩余空间
固定

如上面的示例,左右两侧都可以输入文字,它们的宽度也可以改变,但始终保持在一行内,这算是两列自适应吧。如果给右侧设置个固定宽度,那么就是一列固定一列自适应了。

<style>
  .wrap {
    display: flex;
    flex-direction: row;  /* 左右排列 */
  }
  .wrap .a {
    flex: 1; /* 默认占满,如果空间不足,该项目将缩小 */
  }
</style>
<div class="wrap">
  <div class="a">占据剩余空间</div>
  <div class="b">固定</div>
</div>

flex 布局一列固定宽度一列自适应

02/26
04:03
学习

移动端使用 vw + rem 自适应布局

使用 rem 布局时,最关键的地方在于动态计算 rem 的值。比如设计稿 640px,我们预设 rem 为 100px。rem 是设计宽度的 15.625%(100 / 640 = 0.15625)。当设备宽度为 320px 的时候,rem 值应该按比例变成 50px。

以前当设备宽度变化时,我们要根据这个比例重新计算 rem 应该是多少,增加了额外的工作量。如果我们可以直接告诉浏览器,我的 rem 就是这个比例(页面宽度的 15.625%),你聪明一点自己算吧!这样不就省事了吗?没错,这就是 vw 单位。

vw 是视图宽度,1vw 相当于 1% 视图宽度(想象把页面宽度分成了 100 份)。所以上面的比例 15.625%,用 vw 就是 15.625vw。当页面宽度变大或者变小,rem 总是页面宽度的 15.625%。

html{
    font-size: 15.625vw;  // 要理解 vw 是个百分比单位
}
// 下面照常使用 rem 做单位

我们这么写就可以了,浏览器会自动计算出来 rem 的值,非常的方便。

如果你的设计稿和预设 rem 不是 640px、100px,那么只需要依据你的比例,修改 vw 值即可。
Read More →

移动端使用 vw + rem 自适应布局

01/16
07:43
学习

CSS 文字两端分散对齐

现在 CSS 实现文字的两端分散对齐效果已经很简单了,如下我们要把几句话分散对齐:

念 奴 娇

大 江 东 去

千 古 风 流 人 物

谈 笑 间 樯 橹 灰 飞 烟 灭

my name is saber

代码如下:

<style>
	.justify {
		width: 360px;
		text-align: justify;
		text-align-last: justify;
	}
</style>
<p class="justify">念 奴 娇</p>
<p class="justify">大 江 东 去</p>
<p class="justify">千 古 风 流 人 物</p>
<p class="justify">谈 笑 间 樯 橹 灰 飞 烟 灭</p>
<p class="justify">my name is saber</p>

现在时间 2019 年 1 月,以上代码在现在最新版的 Chrome、Firefox、Edge、IE 、手机 QQ 里均测试通过。
Read More →

CSS 文字两端分散对齐

09/19
09:40
学习

JavaScript 转换 CSS 里的长度单位

CSS 的常用长度单位有 px、em、rem、pt 等。今天我遇到一个情况,有两个网站都使用了 rem 作为单位,但是根元素(html)的字号并不相同,需要进行转换。

移植页面的根元素字号是 20px,CSS 规则如:
height: 4rem;

我的根元素字号是 100px,需要除以 5,改成:
height: 0.8rem;

因为需要修改的地方很多,所以我写了个正则来处理。本文的代码并不是一个通用的工具,只是提供了解决思路。

这次的情况是同一种单位之间的转换,有时候我们可能需要进行不同单位之间的转换,思路都是一样的,根据需要修改代码即可。
Read More →

JavaScript 转换 CSS 里的长度单位