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

几个概念

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

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

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

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

Media Query断点单位

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

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

默认情况

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

小于800像......

SVG描边动画

See the Pen jxPVEj by NINE (@sollrei) on CodePen.

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

SVG的stroke属性

stroke 颜色

stroke-width 宽度

stroke-linecap 端点的表现

stroke-dasharray 虚线

描边......

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

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......