王不二的書架

# rem 适配布局 # rem 基础 rem (root em) 是一个相对单位，类似于 em, em 是父元素字体大小 不同的是 rem 的基准是相对于 html 元素的字体大小 比如，根元素 (html) 设置 font-size=12px; 非根元素设置 width: 2rem; 则换成 px 表示就是 24px # 媒体查询 媒体查询 (Media Query) 是 CSS3 新语法 使用 @media 查询，可以针对不同的媒体类型定义不同的样式 @media...

# Less # 维护 css 的弊端 css 是一门非编程式语言，没有变量，函数，SCOPE (作用域) 等概念 CSS 需要书写大量看似没有逻辑的代码，冗余度比较高 不方便维护及扩展，不利于复用 CSS 没有很好的计算能力 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难编写出组织良好且易于维护的 CSS 代码项目 # Less 介绍 Less (Leaner Style Sheets 的缩写) 是一门 CSS 扩展语言，也成为 CSS 预处理器 作为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为 CSS...

# 渐变色 # 背景线性渐变 语法 1 : 123background: linear-gradient(起始方向, 颜色1, 颜色2, ...);background: -webkit-linear-gradient(left, red, blue);background: -webkit-linear-gradient(left, top, red, blue); 背景渐变必须是添加浏览器私有前缀 起始方向可以是：方位名词 或者 度数，如果省略默认就是 top

# flex 布局 # 布局原理 flex 是 flexible Box 的缩写，意为 “弹性布局”, 用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局 当我们为父盒子设为 flex 布局以后，子元素的 float, clear 和 vertical-align 属性将失效 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局 采用 flex 布局的元素，成为 flex 容器 (flex container), 简称 “容器”. 它的所有子元素自动成为容器成员，成为 flex 项目 (flex item), 简称 “项目” 体验中 div...

# 移动端开发 1234567891011/*CSS3盒子模型*/box-sizing: border-box;-webkit-box-sizing: border-box;/*点击高亮设置为透明*/-webkit-tap-highlight-color: transparent;/*在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式*/-webkit-appearance: none;/*禁用长按页面是的弹出菜单*/img, a { -webkit-touch-callout: none;} # 技术选型 移动端布局和 PC...

# 二倍图 # 物理像素 & 物理像素比 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了 我们开发时候的 1px 不一定等一 1 个物理像素 PC 端页面，1px 等于 1 物理像素，移动端就不尽相同 1px 能显示的物理像素点的个数，称为物理像素比或屏幕像素比 # 多倍图 对于一张 50px * 50px 的图片，在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊 在标准 viewport 设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题 通常使用二倍图，因为 iPhone6/7/8...

# 视口 视口 (viewport) 就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口，视觉视口和理想视口 # 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的 PC 端页面在手机上显示的问题 IOS, Android 基本都将这个视口分辨率设置为 980px, 所以 PC 上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面 # 视觉视口 visual...

# 浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加 # 私有前缀 -moz- : 代表 firefox 浏览器私有属性 -ms- : 代表 ie 浏览器私有属性 -webkit- : 代表 safari, chrome 私有属性 -o- : 代表 opera 私有属性

# CSS3 3D 转换 3D 转换我们主要学习工作中最常用的 3D 位移和 3D 旋转 主要知识点 : 3D 位移 : translate3d (x,y,z) 3D 旋转 : rotate3d (x,y,z) 透视 : perspective 3D 呈现 : transform-style # 三维坐标系 三维坐标系就是指立体空间，立体空间是由三个轴共同组成的 x 轴：水平向右 注意 : x 右边是正值，左边是负值 y 轴：垂直向下 注意 : y 下面是正值，上面是负值 z 轴：垂直屏幕 注意：往外面是正值，往里面是负值 # 3D 移动 translate3d 3D 移动在...

# CSS3 动画 动画 (animation) 是 CSS3 中具有颠覆性的特征之一，可通过设置多个子节点来精确控制一个或一组动画，常用来实现复杂的动画效果 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果 # 动画的基本使用 制作动画分为两步 : 先定义动画 再使用 (调用) 动画 动画序列 : 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列 再 @keyframes 中规定某项 CSS...