设备物理像素和设备独立像素

几个概念

设备像素,也称为物理像素,是设备能控制显示的最小单位;

CSS像素,写页面样式时候的像素单位,不是实际存在而是抽象的;

设备独立像素,计算机坐标系中的一个点,是可由程序控制使用的虚拟像素。(也有称设备逻辑像素)

screen对象的width和height属性可以返回显示屏的宽高,这个值其实是设备独立像素而不是屏幕分辨率,设备的屏幕分辨率是无法直接用代码获取的。在pc端看到的......

Media Query断点单位

之前做一个项目,用的pure css里的grids来做的栅格和响应式布局,css里处理断点的是使用的em单位,因为刚好和设计师那边给的断点位置不一样就直接改了并顺手写的px单位。最近又有类似的项目突然想到这个单位的问题,就稍微测试一下下,看看不一样的单位有什么区别。

IE看的ie9,因为虚拟机里只有这个..看之后能不能补一下

默认情况

三个div,在断点处更改背景色。

@media s......

SVG描边动画

See the Pen by NINE () on .

图标是在阿里的iconfont里面随便翻的,下载的svg格式,描边动画需要有stroke

SVG的stroke属性

stroke 颜色

stroke-width 宽度

stroke-linecap 端点的表现

stroke-dasharray 虚线

描边动画重点在最后这个属性,SVG本身也可以用......

Flexbox十分钟入门

原文地址:

Flexbox是什么?

,“弹性盒子”(flexible box)的简称,是 引入的一种布局模式,它决定了元素在页面里是如何排列的,以便预测在不同的屏幕尺寸和设备下的展示样式。

之所以称为Flexbox是因为它可以让元素在flex盒子里伸展或者收缩来更好的填充可用空间。与传统的布局方式比如展示成表格和行内浮动相比,Flexbox在以下方面更有优势:

在......

67个帮网页开发者节省时间的工具、库和资源

原文:

在本文中,我并不会谈论一些大型的前端框架,比如像React、Angular、Vue等,也不准备讲流行的代码编辑器如Atom,VS Code,Sublime等,我只是想分享一个我认为对提升开发者工作效率有帮助的工具列表。

一些朋友可能对其中的一些工具有所了解,但是如果你从中发现新的和有用的东西,我会感到很高兴。

这个列表包含很多不同的资源,所以为了方便......

React Native SVG描边动画

stroke属性

stroke 定义描边颜色

stroke="#0078ff"

strokeWidth 定义描边的宽度

strokeWidth="3"

创建虚线时候用到的属性:

strokeDasharray 创建虚线

// 假设一个‘空格’5像素,一个‘_’5像素

strokeDasharray="5"

// 看到的是 _ _ _ _ 即5像素......

sass学习笔记

#{} 在字符串中使用变量

p:before {

content: '#{5 + 10}'

}

p:before {

content: '15';

}

ie_hex_str 将颜色值转换成IE filter中使用的带透明度的 #AARRGGBB格式(前两位是16进制的alpha值)

filter: progid:DXImageTransform.Microsoft.gradie......

一些实用的sass混合宏

0.0放一下

响应式

$media-stack:

(group: tablet, id: general, rule: "screen and (max-width: 960px)"),

(group: small, id: general, rule: "screen and(max-width: 640px)"),

(group: small, id: small, rule: "scre......