saber酱的抱枕

努力变强

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

02/14
02:56
软件

使用 UnCSS 移除冗余的 CSS 规则

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
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 里的长度单位

11/21
09:00
软件

手机QQ浏览器的坑

今天上线了一个手机站,然后我打算在手机上看看效果。考虑到兼容性,我就不用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浏览器的坑

06/5
13:58
学习

使用CSS美化表单(checkbox、radio)

今天做的网站上有个地方的单选按钮是这样的:

 使用CSS美化表单(checkbox、radio)

这个需要做美化,我找到了一个办法,步骤如下:

1.先把按钮隐藏,然后放一个i标签来伪装成按钮。把我们自己做的按钮图片设置为i标签的背景图。

2.按钮被隐藏起来了,怎么选中/反选按钮的状态呢?这就需要用label标签把按钮、i标签以及文字包裹起来,这样点击i标签和文字就可以设置按钮的选中状态了。

html代码如下:

<label><input type="radio" name="sex" value="男" checked><i></i> 男</label>
<label><input type="radio" name="sex" value="女"><i></i> 女</label>

3.在按钮的选中状态改变后,css怎样能相应的改变图片呢?我原以为要用js来判断选中状态,不曾想css里也有对应的选择器了。

css代码如下:

input[type="radio"] {display:none;} /*隐藏按钮*/
label i {  } /*设置通用样式,如宽高等*/
input[type="radio"] + i {  } /*这里设置未选中时的背景图,内略*/
input[type="radio"]:checked + i {  } /*这里设置选中时的背景图,内略*/

这是什么操作?我查了下,原来这是 :checked 是一个css3的伪类选择器,可以匹配每个选中的输入元素(仅适用于单选按钮或复选框)。

除此之外还有个识别禁用状态的 :disabled 伪类选择器,这次我没有使用。

+号选择器则代表相邻的元素。
Read More →

使用CSS美化表单(checkbox、radio)

06/5
12:03
学习

img元素不能使用after、before伪元素的研究

通过使用css的after、before伪元素,我们可以对html元素追加内容。今天我在对img元素使用after、before伪元素时发现不生效,后来确定是after、before伪元素对于img标签这类不支持内嵌其他标签的标签无效。

如下图,是对p标签使用after,正常。

::before ::after css img 伪元素 无效

注意,如果生效的话,我们在开发者工具里能看到红框处添加了伪元素。

下面是对img元素使用after,css规则是正确加载了的,但是没有给img标签追加伪元素。

::before ::after css img 伪元素 无效

后来我思考了一下,发现伪元素生效时,在html里追加的伪元素是位于标签内的。但img标签不能再嵌套其他标签,所以这时候伪元素就不生效了。

以此类推,其他一些不能嵌套子元素的标签应该一样不能使用after、before伪元素。

后来我去MDN上看了看这俩伪元素的定义,确实是这样。国内的一些网站上的资料则是说在元素前/元素后追加伪元素,害人不浅。

img元素不能使用after、before伪元素的研究

04/2
08:00
学习

解决display: inline-block;的间隙问题

css的display: inline-block是替代浮动(float)的一个好办法。inline-block布局不会有float的一些缺点:脱离文档流、破坏inline box(具体来讲就是float的元素要等高,否则下面的float元素会被上面的卡住)。inline-block不会脱离文档流,元素高度不同也不会卡住。但是inline-block的元素之间会有空隙。

如下代码:

<div id="a"></div>
<div id="b"></div>
<style>
	#a,#b{width: 100px;height: 150px;display: inline-block;}
	#a{background: #0c0;}
	#b{background: #0ff;}
</style>

两个div都是inline-block布局,默认会有空隙:

解决display: inline-block;的间隙问题

(IE8的空隙还比其他浏览器少了1px)

那怎么办呢?有两个解决办法:

1.使两个元素的代码之间没有空隙。如上例,则时两个div的代码挨在一起,中间不要换行。这样就没有空隙了。

2.给应用了inline-block布局的元素的父元素添加css属性:font-size: 0; 这样就OK了。

以上两个方法都兼容所有浏览器。

解决display: inline-block;的间隙问题

ps:以前chrome不吃font-size: 0;这一套,不过较新版本的chrome也支持了。

解决display: inline-block;的间隙问题