css3
优雅降级(优先保证高版本浏览器上的效果,低版本浏览器能看就行) 和 渐进增强(先保证低版本的浏览器,再去在高版本浏览器上增加一些css3效果和额外的js);
- 前端部分的动画 : javacsript动画(PC端)和css3动画(移动端和高版本浏览器)
- css3动画模块: transition动画,transform变形,animation动画
- transition动画:通过改变css属性值,实现起始值到结束值之间平滑过渡的效果 ,css属性值发生变化时,transition动画才会被触发
transition
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#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 : 动画延迟的时间
*/
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
box-shadow
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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;*/
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
rem
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
/*--设置页面中REM单位相对的根植,也即是页面中的1REM=100PX--*/
font-size: 100px;
}
#div1 {
/*--原来需要编写的固定样式xxxPX,现在都按照转化的比例编写成xxxREM,这样以后只要根植发生变化,我们当前元素的宽度和高度都会自己跟着改变--*/
/*--在移动端响应式布局开发中我们一般不会设置最外围盒子或者容器的宽度值,都让其自己百分比自适应即可--*/
margin: 0.2rem;
height: 3rem;
background: red;
}
/*--REM也是响应式的布局思想,而且是目前最主要和最主流的布局思想,但是在IE6~8下是无法识别的--*/
</style>
<script type="text/javascript">
//->按照设计稿的标准比例,在根据当前屏幕的尺寸,动态的计算出当前页面的REM比例,保证在不同屏幕的下的响应式开发
~function (desW) {
var winW = document.documentElement.clientWidth;
document.documentElement.style.fontSize = winW / desW * 100 + "px";
}(640);
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
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)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<!--禁止浏览器自己把页面中的数字识别为电话号码-->
<meta name="format-detection" content="telephone=no"/>
<!--把苹果手机浏览器中的菜单栏工具栏隐藏-->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!--控制状态栏显示样式-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--http://www.admin10000.com/document/6304.html-->
<!--设置苹果手机到头后在下来出现的那个黑色背景框中的标题的-->
<meta name="apple-mobile-web-app-title" content="标题">
<!--检测是PC的浏览器还是移动端的浏览器-->
<script type="text/javascript">
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/";
}
}
</script>
<title></title>
<style type="text/css">
* {
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;
}
}
</style>
</head>
<body>
<a href="tel:13041086186">立即联系我</a>
<a href="sms:13041086186">发短信给我</a>
<!--
在移动端的H5开发过程中,我们不管是使用CSS/JS都能禁止用户的横竖屏切换,但是我们可以检测出当前是横屏还是竖屏(CSS/JS)
-->
<script type="text/javascript">
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);
</script>
<!--
更多的meta标签：
[UC 浏览器的部分私有Meta属性]
设置屏幕方向为横屏还是竖屏
<meta name="screen-orientation" content="portrait|landscape">
设置是否全屏，yes表示强制浏览器全屏
<meta name="full-screen" content="yes">
缩放不出滚动条
<meta name="viewport" content="uc-fitscreen=no|yes"/>
设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。
排版
<meta name="layoutmode" content="fitscreen|standard" />
fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。
夜间模式
<meta name="nightmode" content="enable|disable"/>
强制图片显示
<meta name="imagemode" content="force"/>
UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个
<img src="..." show="force"/>
使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
<meta name="browsermode" content="application"/>
[QQ 浏览器x5内核定制标签说明]
设置屏幕方向
<meta name="x5-orientation" content="portrait|landscape"/>
设置全屏
<meta name="x5-fullscreen" content="true" />
设置屏幕模式
<meta name="x5-page-mode" content="app" />
-->
</body>
</html>
网友评论