1.响应式设计
响应式网站设计(Responsive Web design)的理念是:
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。
无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
2.CSS3 media query
3.mobile first的响应式设计
三个优点:
需求驱动
针对移动设备加快了CSS代码的渲染速度
可以节约带宽
4.CSS3 transform(变换)
(1)transform 属性向元素应用 2D 或 3D 转换。
该属性允许我们对元素进行旋转、缩放、移动或倾斜。
取值为:
rotate(angle) 定义 2D 旋转,在参数中规定角度。例:transform:rotate(7deg);
scale(x,y) 定义 2D 缩放转换。
translate(x,y) 定义 2D 转换。即平移。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
transform属性可以取多个值的组合,操作顺序从右往左。如:transform: translate(45px) rotate(7deg) scale(2);
(2)transform-origin 属性指定进行transform操作所依赖的基点的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
语法:transform-origin: x-axis y-axis z-axis;
x-axis 可能的值:left center right length %;
y-axis 可能的值:top center bottom length %;
z-axis 可能的值:length。
transform 和 transform-origin 这两个属性可以作用的元素是可变形元素;块级元素和inline-block元素都属于可变形元素,而行内元素不属于。
不是的话就需要设置display属性。
兼容性:绝大部分的主流浏览器都是支持的。建议一般加上对应的厂商前缀。
5.CSS3 transition(过渡效果)
transition 属性是一个简写属性,用于设置四个过渡属性:
.transition-property
.transition-duration
.transition-timing-function
.transition-delay
注意:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
并不是所有属性都是可动画属性。
transition-property——规定设置过渡效果的 CSS 属性的名称。
transition-duration——规定完成过渡效果需要多少秒或毫秒。
transition-timing-function——规定速度效果的速度曲线。
取值有:
ease 默认值;规定慢速开始,然后变快,然后慢速结束的过渡效果。
linear 规定以相同速度开始至结束的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。
transition-delay——定义过渡效果何时开始。
transition——四个过渡属性的简写属性。默认值:all 0 ease 0;
例如:transition: width 2s;
兼容性:IE10以下的版本是不支持的,其他几乎所有的主流浏览器都是支持的。
建议一般加上对应的厂商前缀。
6.CSS3 animation(动画)
与transition的异同点:
相同点:二者所对应的UI状态的变化都不再是瞬时完成,而是有一个平滑变化的过程。
不同点:
transition 所对应的UI状态的变化是单一的变化,即从一个UI状态平滑地变化为另一个UI状态;
而animation 所对应的UI状态的变化可以是一系列UI状态的变化。
animation 属性是一个简写属性,用于设置六个动画属性:
.animation-name
.animation-duration
.animation-timing-function
.animation-delay
.animation-iteration-count
.animation-direction
注意:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了.
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
transition——六个过渡属性的简写属性。默认值:none 0 ease 0 1 normal;
如需在 CSS3 中创建动画,需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
兼容性:IE10以下的版本是不支持的,其他几乎所有的主流浏览器都是支持的。
响应式网站设计(Responsive Web design)的理念是:
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。
无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
2.CSS3 media query
3.mobile first的响应式设计
三个优点:
需求驱动
针对移动设备加快了CSS代码的渲染速度
可以节约带宽
4.CSS3 transform(变换)
(1)transform 属性向元素应用 2D 或 3D 转换。
该属性允许我们对元素进行旋转、缩放、移动或倾斜。
取值为:
rotate(angle) 定义 2D 旋转,在参数中规定角度。例:transform:rotate(7deg);
scale(x,y) 定义 2D 缩放转换。
translate(x,y) 定义 2D 转换。即平移。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
transform属性可以取多个值的组合,操作顺序从右往左。如:transform: translate(45px) rotate(7deg) scale(2);
(2)transform-origin 属性指定进行transform操作所依赖的基点的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
语法:transform-origin: x-axis y-axis z-axis;
x-axis 可能的值:left center right length %;
y-axis 可能的值:top center bottom length %;
z-axis 可能的值:length。
transform 和 transform-origin 这两个属性可以作用的元素是可变形元素;块级元素和inline-block元素都属于可变形元素,而行内元素不属于。
不是的话就需要设置display属性。
兼容性:绝大部分的主流浏览器都是支持的。建议一般加上对应的厂商前缀。
5.CSS3 transition(过渡效果)
transition 属性是一个简写属性,用于设置四个过渡属性:
.transition-property
.transition-duration
.transition-timing-function
.transition-delay
注意:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
并不是所有属性都是可动画属性。
transition-property——规定设置过渡效果的 CSS 属性的名称。
transition-duration——规定完成过渡效果需要多少秒或毫秒。
transition-timing-function——规定速度效果的速度曲线。
取值有:
ease 默认值;规定慢速开始,然后变快,然后慢速结束的过渡效果。
linear 规定以相同速度开始至结束的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。
transition-delay——定义过渡效果何时开始。
transition——四个过渡属性的简写属性。默认值:all 0 ease 0;
例如:transition: width 2s;
兼容性:IE10以下的版本是不支持的,其他几乎所有的主流浏览器都是支持的。
建议一般加上对应的厂商前缀。
6.CSS3 animation(动画)
与transition的异同点:
相同点:二者所对应的UI状态的变化都不再是瞬时完成,而是有一个平滑变化的过程。
不同点:
transition 所对应的UI状态的变化是单一的变化,即从一个UI状态平滑地变化为另一个UI状态;
而animation 所对应的UI状态的变化可以是一系列UI状态的变化。
animation 属性是一个简写属性,用于设置六个动画属性:
.animation-name
.animation-duration
.animation-timing-function
.animation-delay
.animation-iteration-count
.animation-direction
注意:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了.
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
transition——六个过渡属性的简写属性。默认值:none 0 ease 0 1 normal;
如需在 CSS3 中创建动画,需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
兼容性:IE10以下的版本是不支持的,其他几乎所有的主流浏览器都是支持的。
建议一般加上对应的厂商前缀。