Saber 酱的抱枕

Fly me to the moon

03/12
2019
学习

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

saber 撰写 单条回复 2,344次查看
占据剩余空间
固定

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

<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
2019
学习

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

saber 撰写 无回复 2,488次查看

使用 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 自适应布局

02/14
2019
软件

使用 UnCSS 移除冗余的 CSS 规则

saber 撰写 2条回复 2,535次查看

CSS 文件里出现冗余的规则是很常见的，比如我们引用了某个 UI 框架的 CSS 文件，里面包含了所有组件的样式规则。但是我们在一个页面里不可能用到所有的组件，那么用不到的规则就是冗余的，我们可以使用 NodeJS 的 UnCSS 包来去掉冗余的规则。

UnCSS GitHub 页面

首先安装 UnCSS：

npm install -g uncss

之后指定要分析的页面的 url，并设置输出的文件名：

uncss http://127.0.0.1:5500/index.html > styles.css

如上示例，UnCSS 会分析指定 url 的页面，提取所有被使用的 CSS 规则，保存到一个新的 CSS 文件里。非常快速便捷。

上面的示例是分析单个页面，我们也可以通过配置文件来让 UnCSS 批量处理多个页面。不过我还不清楚有没有分析整站的办法。

使用 UnCSS 移除冗余的 CSS 规则

01/16
2019
学习

CSS 文字两端分散对齐

saber 撰写 4条回复 2,550次查看

现在 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
2018
学习

JavaScript 转换 CSS 里的长度单位

saber 撰写 无回复 2,413次查看

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

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

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

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

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

JavaScript 转换 CSS 里的长度单位

11/21
2017
软件

手机QQ浏览器的坑

saber 撰写 5条回复 3,140次查看

今天上线了一个手机站，然后我打算在手机上看看效果。考虑到兼容性，我就不用chrome了，安装了个手机QQ浏览器，看看有什么新发现。

问题1：不支持background-size的简写。如下简写方式：

background: url(../images/jjtitbg.png) 0 0 no-repeat/100%;

和分开写应该是等价的:

background: url(../images/jjtitbg.png) 0 0 no-repeat;
background-size: 100%;

chrome浏览器的pc和移动版都支持简写，但是qq浏览器不行，直接判定这条规则无效，不显示背景图了。没想到X5内核竟恐怖如斯。我去QQ浏览器的论坛上提建议，结果帖子竟然无法提交。你开心就好。
Read More →

手机QQ浏览器的坑

1 2 3 4 5 6