JavaScript进阶教程-5.h5 css3响应式布局webapp

css3

优雅降级(优先保证高版本浏览器上的效果,低版本浏览器能看就行) 和 渐进增强(先保证低版本的浏览器,再去在高版本浏览器上增加一些css3效果和额外的js);
- 前端部分的动画 : javacsript动画(PC端)和css3动画(移动端和高版本浏览器)
- css3动画模块: transition动画,transform变形,animation动画
- transition动画:通过改变css属性值,实现起始值到结束值之间平滑过渡的效果 ,css属性值发生变化时,transition动画才会被触发

transition

box-shadow

rem

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)

    
    
    
    
    
    
    
    

    
    
    


    
    


    
    



立即联系我
发短信给我