css3
优雅降级(优先保证高版本浏览器上的效果,低版本浏览器能看就行) 和 渐进增强(先保证低版本的浏览器,再去在高版本浏览器上增加一些css3效果和额外的js);
- 前端部分的动画 : javacsript动画(PC端)和css3动画(移动端和高版本浏览器)
- css3动画模块: transition动画,transform变形,animation动画
- transition动画:通过改变css属性值,实现起始值到结束值之间平滑过渡的效果 ,css属性值发生变化时,transition动画才会被触发
transition
#div1{
width: 100px;
height: 100px;
background: red;
opacity: 1;
transition:all 1s; /*动画执行二次*/
-webkit-transition:all 1s;/*谷歌浏览器*/
-moz-transition: all 1s; /*火狐浏览器*/
-ms-transition : all 1s;/*ie浏览器*/
-o-transition: all 1s;/*opera浏览器*/
}
#div1:hover{
width: 300px;
height: 300px;
opacity: 0.3;
/*transition-property: width;/!*默认值是all*!/
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 1s;*/
/*transition:width 1s ease-in,height 1s ease-out ;*/
}
/*
transition-property :设置的css属性
transition-duration: 动画执行的时间
transition-timing-function :ease-in/ease-out/linear 动画类型
transition-delay : 动画延迟的时间
*/
box-shadow
ul{
list-style: none;
}
ul li{
width: 100px;
height: 100px;
margin: 20px ;
}
/* ul :nth-child(1){/!*1.先找到所有的子元素,2.找第一个子元素 3.找到的这个第一个子元素的标记名是否为li*!/
background: orange;
}
ul li:nth-of-type(1){/!*指定了子元素的类型 1.先找到标记名是li的子元素,2.找第一个子元素*!/
background: orange;
}*/
/*ul li:nth-child(even){/!*偶数子元素*!/*/
/*background: orange;*/
/*}*/
ul li:nth-child(2n){/*偶数子元素*/
background: orange;
}
/*ul li:nth-child(odd) { /!*奇数子元素*!/*/
/*background: green;*/
/*}*/
ul li:nth-child(2n+1) { /*奇数子元素*/
background: green;
}
ul li:nth-child(1){
/*box-shadow:2px 4px 10px 3px rgba(23, 255, 67,0.5),5px 5px 10px 5px #ff60d7,7px 7px 10px 7px #ffdf2a;*/
}
/*
box-shadow 语法
第一个参数 x轴方向偏移 正->右 负 ->左
第二个参数 y轴方向偏移 正->下 负 - >上
第三个参数 模糊半径
第四个参数 扩展半径 正->阴影往外扩散 负->阴影往内收缩
第五个参数 阴影颜色
*/
ul li:nth-child(2){
box-shadow:0 6px 10px -3px rgba(23, 255, 67,1)
}
ul li:nth-child(3){
box-shadow: 0 0 0 10px deepskyblue;/*可以实现边框效果,但是不会算在盒子模型里*/
/*border:10px solid deepskyblue;*/
}
rem
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
title* {
margin: 0;
padding: 0;
}
html {
/*--设置页面中REM单位相对的根植,也即是页面中的1REM=100PX--*/
font-size: 100px;
}
#div1 {
/*--原来需要编写的固定样式xxxPX,现在都按照转化的比例编写成xxxREM,这样以后只要根植发生变化,我们当前元素的宽度和高度都会自己跟着改变--*/
/*--在移动端响应式布局开发中我们一般不会设置最外围盒子或者容器的宽度值,都让其自己百分比自适应即可--*/
margin: 0.2rem;
height: 3rem;
background: red;
}
/*--REM也是响应式的布局思想,而且是目前最主要和最主流的布局思想,但是在IE6~8下是无法识别的--*/
//->按照设计稿的标准比例,在根据当前屏幕的尺寸,动态的计算出当前页面的REM比例,保证在不同屏幕的下的响应式开发
~function (desW) {
var winW = document.documentElement.clientWidth;
document.documentElement.style.fontSize = winW / desW * 100 + "px";
}(640);
h5场景
HTML5新增加一些构建页面语义化结构标签
->header、footer、nav、article、section(区域)、figure(配图)、figcaption(配图说明)、aside(批注或标注)...
->在IE6~8浏览器中,浏览器渲染引擎无法识别这些新增加的标签
-->
HTML5搭建响应式布局页面
->PC端和移动端共用同一套项目,当浏览器或者屏幕窗口尺寸发生变化的时候,我们页面元素样式的渲染会随之发生改变,以此达到更适合观看的效果 ->"响应式布局"
->REM布局
->@media媒体查询
->flexbox CSS3新增加的弹性伸缩盒子模型(图解CSS3)
移动端一些基本知识
H5、webApp、CSS3、移动端、响应式布局 ->"移动端响应式布局开发"
1、做移动端响应式布局开发,我们经常做的项目种类:
1)PC端和移动端共用同一套项目,在不同设备上展示不同的样式
->布局的时候宽度一般不要写具体的固定值;@media设置媒体查询,在不同尺寸下微调样式;对于图片高度随着宽度的自适应,我们使用JS按照宽高比进行变化;对于IE6~8的浏览器,由于不支持@media,我们把样式中微调的部分放在JS中在去实现一遍;
->浏览器检测横竖屏切换:CSS3中的@media检测、JS检测 (我们H5只能检测出用户是否进行了横竖屏的切换,但是不能禁止用户横竖屏的切换)
->bootstrap:http://www.bootcss.com/ (栅格化布局)
->less(sass):http://www.bootcss.com/p/lesscss/ (CSS预编译->CSS实现面向对象的编程)
2)移动端和PC端是两套不同的项目,开发的时候也是按照两套不同的设计稿开发的(项目中最经常使用的一种模式)
->PC端所有的尺寸和设计稿一模一样即可,不需要做任何的响应式
->移动端的响应式布局开发
1)一般不要给元素设置具体的宽度,但是对于一些小图标可以设定具体宽度值
2)高度值可以设置固定值,设计稿有多大,我们就严格写多大
3)所有设置的固定值都用REM做单位(首先在HTML中设置一个基准值：PX和REM的对应比例,然后在效果图上获取PX值,布局的时候转化为REM值)
4)JS获取真实屏幕的宽度,让其除以设计稿的宽度,算出比例,把之前的基准值按照比例进行重新的设定,这样以后我们的项目就可以在移动端自适应了
->"REM响应式布局思想"
3)移动端单独一套项目(响应式布局方案都是一模一样的,不需要什么区别),不一样的地方在于,上述的第二条更多的表现在是用户在自己手机内置流浏览器或者安装的外加浏览器(UC、谷歌、QQ)访问的;
->我们的H5除了可以运行在浏览器中,还可以运行在APP的webView中 ->hyBride模式
->不管是浏览器还是webView都是webkit内核,需要我们单独的处理的也没有
APP:IOS object-c / 安卓 JAVA NATIVE
webApp:JS(插件或者框架 angular、gulp、seajs)+HTML(5)+CSS(3)+React native
->我们项目中的很多功能都应该由APP来完成,H5本身实现不了(调取通讯录、调取相册(H5可以实现但是兼容很差)、调取摄像头、重力感应...),一些经常需要更新的东西,响应式布局页面由H5来做
->React native/phone gap/APICloud...使用JS开发一个APP外壳,里面嵌入的是H5页面,而且这些框架已经把一些操作系统级别的功能实现了,我们的H5页面中可以使用一些方式调取壳子实现的方法(jsBridge)
->涉及到和APP的通信:APP实现了一个方法,我们的H5需要调取这个方法
1)伪URL通信：(和JSONP的原理非常的类似)
H5和APP商定一个假的URL地址:"http://leifeng.qq.com/"
H5通过window.location.href="假地址?callback=phone"
APP拦截这个假URL地址的请求,得到问号后面的参数,把要调取的功能执行即可
2)jsBridge:(它就是个JS库,包含了我们H5要调取App的所有方法)
H5把写好的jsBridge.js引入进来,我们只需要执行对应的方法,App就知道了要调取的功能,从而实现一些交互
->H5嵌入第三方APP:QQ、微信
1)微信中提供了很多的供H5调取的方法(jsBridge)
2)“H5微信的二次开发” ->后台支持(后台要随机生成动态的秘钥 NODE)
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
var curURL = window.location.href;
if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
//手机端浏览器
if (curURL.indexOf("www.qq.com") > -1) {
window.location.href = "http://xw.qq.com/";
}
} else {
//pc端浏览器
if (curURL.indexOf("xw.qq.com") > -1) {
window.location.href = "http://www.qq.com/";
}
}
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
background: pink;
overflow: hidden;
}
@media all and (orientation: portrait) {
/*竖屏*/
body {
background: pink;
}
}
@media all and (orientation: landscape) {
/*横屏*/
body {
background: green;
}
}
发短信给我
var flag = "onorientationchange" in window,
event = flag ? "orientationchange" : "resize";
window.addEventListener(event, function () {
if (flag) {
if (Math.abs(window.orientation) === 90) {
//->横屏
alert("横");
} else {
//->竖屏
alert("竖");
}
}
}, false);
3310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
