• Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 ;详细说明我就不说了,只给新手说下,为什么W3C那么多标签,只使用16个就可以把整个项目解决了? 原因是不要以为标签多,...

    我所使用到的HTML页面标签:

    Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 ;详细说明我就不说了,只给新手说下,为什么W3C那么多标签,只使用16个就可以把整个项目解决了?

    原因是不要以为标签多,我们就一定要使用到它的,我们要的是使用广泛的,易记的。

    稍微解释下,块级元素和行内元素是什么意思?

    块级元素就是他占满一行的;行内元素就是他的多个同类可以同时在同一行。

    下面讲解下,head标签里面我们在移动端一般都放什么?

    Title,meta,link,3个标签会比较多,解释请看:

    Title:该网页的标题,这个标题一般会显示在浏览器打开该网页时,最地址栏上面可以简单文字段。

    Meta:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>

    <meta content="yes"name="apple-mobile-web-app-capable"/>

    <meta content="black"name="apple-mobile-web-app-status-bar-style"/>

    <meta content="telephone=no"name="format-detection"/>

    <meta content="email=no"name="format-detection"/>

    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport" />

    第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;user-scalable: 用户是否可以手动缩放

    第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;

    第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;

    第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码

    第五个meta标签:用于忽略将页面中邮件地址

    第六个就是最大的高度限定在568Px以内,这个可以忽略,因为我们都会用滑动来代替;当然了,可以用在页面布局不多的地方!

     

    Link:一般只是引入css文件用的,对于import大部分前辈都说不好,而且他一般也只写在css文件内。我们假如打开一个刚刚下载到本地的网页或框架,浏览页面时很慢,估计也就是在css里面引入了谷歌文件,因为我们国内,谷歌是被封杀的!

    Javascript呢?(一般情况下,把引入文件放到</body>前面的)

    下面解释放到head和</body>2个不同地方的区别:

    放在head就是普遍需要用户进行点击或各种操作才触发的事件。

    放在</body>里面就是用户来看之前就执行了。

     

    现在我们来看看CSS的问题了:

    1,我相信99%做过1个项目的人都会了解:reset.css(重置文件或common.css,base.css,名称不一样而已,用途都一样。)

    我会共享我自己今年所总结积累好的文件写到common.css里面。

    @charset "utf-8";
    html,body{background:#f0f0f0;color:#505050;font-size:62.5%;-webkit-user-select:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-touch-callout:none;}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}
    body,button,input,select,textarea {font:14px \5b8b\4f53,'Helvetica Neue',Arial,'Liberation Sans',FreeSans,'Hiragino Sans GB',sans-serif\"Microsoft YaHei"\"微软雅黑";line-height:20px;}
    h1{font-size:24px;}
    h2{font-size:22px;}
    h3{font-size:18px;}
    @media only screen and (min-width:360px) {
        h1{font-size:28px;}
        h2{font-size:26px;}
        h3{font-size:22px;}
        body,button,input,select,textarea {font-size:18px;line-height:26px;}
    }
    h1,h2,h3,h4,h5,h6 {font-weight:normal;}
    html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}/*阻止旋转屏幕时自动调整字体大小*/
    textarea{resize:none;}
    /*取消按钮在inphone上的默认样式*/
    input[type=button]{-webkit-appearance:none;outline:none} 
    input::-webkit-input-placeholder{color:#F0F0F0;}
    textarea::-webkit-input-placeholder{color:#F0F0F0;}
    input::-webkit-input-speech-button {display:none}
    table {border-collapse:collapse;border-spacing:0;}
    th {text-align:inherit;}
    fieldset,img {border:none;}
    abbr,acronym {border:none;font-variant:normal;}
    del {text-decoration:line-through;}
    ol,ul {list-style:none;}
    caption,th {text-align:left;}
    sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
    sup {top:-0.5em;}
    sub {bottom:-0.25em;}
    ins,a,a:hover {text-decoration:none;}
    a:focus,*:focus {outline:none;}
    .clearfix:before,.clearfix:after {content:"";display:table;}
    .clearfix:after {clear:both;overflow:hidden;}
    .clearfix {zoom:1;}
    .clear {clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;}
    .hide {display:none;}
    .block {display:block;}
    .outL{white-space:normal;word-break:break-all;width:100px;}
    .outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width:100px;}
    /*布局*/
    .fl{float:left;display:inline;}
    .fr{float:right;display:inline;}
    .cb{clear:both;}
    .cl{clear:left;}
    .cr{clear:rigth;}
    .rel{position:relative;}
    .abs{position:absolute;}
    .tac{text-align:center;}
    .tal{text-align:left;}
    .tar{text-align:right;}
    .dib{display:inline-block;}
    .vab{vertical-align:bottom;}
    .vam{vertical-align:middle;}
    .vat{vertical-align:top;}
    /*网格*/
    .box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;text-align:center;padding:5px 0;}
    .grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .grid{*zoom:1}
    .grid:before,.grid:after{display:table;content:"";line-height:0}
    .grid:after{clear:both}
    .grid{list-style-type:none;padding:0;margin:0}
    .grid>.grid{clear:none;float:left;margin:0 !important}
    .wrap{float:left;width:100%}
    /*网格*/
    /*flex*/
    .col{height:100%;display:-webkit-box;-webkit-box-orient:vertical;display:flex;display:-webkit-flex;flex-direction:column;}
    .row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;width:100%;height:auto;margin:auto;}
    .flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1;}
    .flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2;}
    .flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3;}
    /*flex*/
    /*容器*/
    .wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding:5px 5px 60px 5px;overflow:auto;margin-top:44px;-webkit-overflow-scrolling:touch;}
    /*头尾*/
    header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#CCCCCC;}
    header{top:0;height:44px;}
    footer{bottom:0;}
    
    /*宽度*/
    .w100p{width:100%}
    .w20p{width:20%;}
    
    /*边距*/
    .m5{margin:5px;}
    .p5{padding:5px;}
    .pt5{padding-top:5px;}
    

      

    注意事项:

    1、你使用display:inline-block浏览器是会有默认边距产生的,所以假如想几个div变成行内的而且无边距,那么最好的方法是使用同一方向的浮动(float),来解决无边距的一列。

    2、引入我的css文件后,你会发现为什么我在字体上要进行个断点设置(@media),我认真的分析过,webapp页面的由于在320px,360px,480px,3个不同viewport宽度大小的情况下制作,那么字体大小肯定要进行相应的设置,不然你在320px的情况下看到的效果跟在480px下看到的是一样。注意:字体是不会自适应的,只有自己进行设置才可以达到预期效果。

    3、图标是同样不会自适应的,只有图片可以设置100%,所以图标假如设置100%就会影响整体布局,宽度可以在Img里面写width=”30”这样(30是图片的宽度30px)。

    4、除了有时header,footer是要求固定fixed定位外,那么中间要做一个容器/外套给他,我们需要在header下面使用wrapper/container放内容。这个怎么设置,你可以看我的css文件已经做好设置而且包括了案例方便查看。并且可以进行内容过多可以滑动。(关于fixed定位的问题,我多次测试的结果发现,在2.3系统以下的低端手机是不支持fixed定位的,是会出现设备兼容问题:向下滑动时,固定后也会随着页面移动,4.0以上的系统是可以支持,相对较好的解决方法是:使用iscoll.js;会有卡顿,但是对于低端机来讲是不错的解决方案。)我个人是选择放弃2.3系统以下的用户群,因为现在的手机1000元左右就可以买到4.0系统以上的手机,所以,我有理由相信连手机都不愿意更换的普遍有2种情况:1,没钱,2,根本不可能成为你的用户;我不会像PC端那样来兼容IE6-8,我现在唯一兴幸的是公司现在没特定标准要求,所以我可以自由选择,我只需要知道这个解决方法就行;我既然放弃低端机市场,那么我就会以最新的技术来进行布局,所以我不使用iscoll.js,直接用我上面的那个wrapper来作为外套就行。

    5、我们如果需要将内容实现2边留有边距,使用的是padding而不是margin。因为设置为margin的话,会出现左边有空白边距,右边反而是贴边的情况。

    6、我们做前端写页面最烦的就是class命名,我不喜欢使用下划线,所以我们可以这样来定义class命名方式:asideContent等情况。还有一种叫意义命名;比如说颜色:红色,我们可以定义为:.red:color:red;模块呢?我们可以这样来做:比如我最近做的一个WP手机风格的webapp页面项目。大家都应该了解他是色块组成,颜色,大小等都不一样。

    我的解决方案是:(在销售模块,定义为sell)

    sellHead:内容的头部;sellFoot:内容的尾部;

    如此类推就有:sellMain;sellContent;sellTitle;sellList;sellTab;sellMenu;sellBtn;sellMsg;sellBanner;sellCol; 

    我相信你们看到英文都容易的理解这个是什么意思,位置对应情况。

    7、从有了前端这个职称后,就逐渐开始流行:OOCSS的写法来布局CSS页面了。是什么意思?就是用面向对象编程的思想来写CSS,因为现在有了Less,Sass这些了,CSS都可以实现编程了,我们前端的压力就越来越大了。最主要的一点就是实行模块化,代码可以重复使用。对于没编程基础的童鞋来说,真心不懂这些专业的术语是个什么东东?大家可以看看下面我的解释:

    (1)、.sellContent{width:200px;height:200px;margin:10px;padding:10px}

    注意:背景颜色,边框,圆角这些就不要写在里面了

    (2)、.bg{background:#00CC66};在HTML页面的class=”sellContent bg”。

    (一)、实现的是class组合,同时这2个class类是哪里需要往哪里放,需要什么呢?当然是他里面的属性,只要是他需要该属性的都可以放到一起组合。(组合一般情况下不要超过4个)

    (二)、以前我们写css可能是遇到到哪个div需要就给他定义那些属性值,而且整个页面下来重复的特别多;现在我这样方式不需要了,我们可以用并列式选择器:.sellMain,.sellContent,.sellTitle{border:1px solid #cccccc},减少代码重复的情况,同时继承选择器的作用我们就要注意了:一个项目下来,我们写的页面会达到100个以上,假如我写 ul li{display:inline-block}这样的话,那么你每个页面只要有li的,他都会是变成行内元素。

    所以,我们写页面前必须要先把整个项目的所有页面看一次,脑袋进行一次布局,这样就不会出现这类的问题了。要全面的去理解这个OOCSS的写法,建议你去下载Bootstrap框架文件来看他的源码,和页面案例的布局。

    8、区分min-width和max-width的区别,英文我们都看懂,但用的话就不一定了;min-width:最小的宽度为多少的时候开始执行下面的断点布局;max-width:最大的宽度为多少的时候停止执行下面的断点布局。

    如:min-width:360px and max-width:480px,就是下面的类只在360px-480px之间执行。

    注意:有时候我们在谷歌或火狐浏览器做测试的,然后放到真机测试时会发现,真机有时候会比浏览器显示的viewport宽度还要小3px—5px。

    9、做头部的时候我往往最讨厌的就是图片和文字对齐;现在我找到新的解决放案了:

    (1)、可以把这个img给他一个下边距:负值;

    (2)、有3个属性值可以选择来用vertical-align:top/middle/bottom  。

    10、我们做移动端的时候,凡是有a标签点击转链接的地方都会系统自带一个透明层的点击效果,取消点击高亮:-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;

    11、响应式布局与自适应布局:(以下仅为个人理解)

    (1)、响应式布局,我的理解是在电脑,平板,手机,分别有不同的页面布局

    (2)、自适应布局,我的理解是在电脑,平板,手机页面布局一样,只是文字大小,图片大小会发生变化而已。

    在电脑上,使用flex-wrap:wrap(伸缩进行换行)这个来进行布局是可以达到响应的,但是在平板和手机就目前来说还不支持这个属性。

    我推荐的最佳方案是使用flex布局。(只是不用伸缩换行属性)

    下面是我做的一个简单案例:

    注意:style.css引用的是上面提供的common.css文件:

    <!DOCTYPE html>
    <html>
    <head>
        <title>首页</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <!--开发后删除-->
        <meta http-equiv="Cache-Control" name="no-store" />
        <meta http-equiv="refresh" content="3" />
        <!--开发后删除-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <link rel="stylesheet" href="css/style.css" />
        <style>
            .flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink;}
        </style>
    </head>
    
        <body>
            <header>
                <ol class="row">
                    <li class="m5">
                        <img src="img/back.png" width="30" /> </li>
                    <li class="flex3 m5">
                        <h1>header</h1>
                    </li>
                    <li class="m5">
                        <img src="img/down.png" width="30" />
                    </li>
                </ol>
            </header>
            <section class="wrapper">
                <ul class="row">
                    <li class="flexcontent p5">1</li>
                    <li class="flexcontent p5">2</li>
                    <li class="flexcontent p5">3</li>
                    <li class="flexcontent p5">4</li>
                    <li class="flexcontent p5">5</li>
                </ul>
                <ul class="row">
                    <li class="flex1 flexcontent p5">1</li>
                    <li class="flex3 flexcontent p5">2</li>
                    <li class="flex2 flexcontent p5">3</li>
                </ul>
            </section>
            <footer class="row tac">
                <ul class="col w20p">
                    <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                    <li class="flex1"><span>底部</span></li>
                </ul>
                <ul class="col w20p">
                    <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                    <li class="flex1"><span>底部</span></li>
                </ul>
                <ul class="col w20p">
                    <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                    <li class="flex1"><span>底部</span></li>
                </ul>
                <ul class="col w20p">
                    <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                    <li class="flex1"><span>底部</span></li>
                </ul>
                <ul class="col w20p">
                    <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                    <li class="flex1"><span>底部</span></li>
                </ul>
            </footer>
            
        </body>
    </html>
    

      CSS3的animate.css动态的使用介绍:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>animate.css 使用方法</title>
    <link rel="stylesheet" type="text/css" href="css/animate.min.css" media="screen" />
    <style>
    
    #bridge{
        border-radius: 15px;
        background: url('images/bridge.png') no-repeat 50% 50%;
        margin: 0 auto;
        width: 400px;
        height: 250px;
        z-index: 20;
        position: static;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="bridge" class="animated flash">
    <!--只需要在相关的块级标签内添加class;
    例如:
    class="animated bounceOutLeft"
    class="animated flash"
    
    -->
    </div>
    
    </body>
    </html>
    

      

    分析开发的断点:

    (1)、国内市场普遍的viewport宽度是320px和360px,像Note2才400px;分辨率,像素这些词语一般是告诉给设计师,我们前端要明白的是viewport;

    (2)、字体大小:我相信有部分童鞋会认为浏览器会自适应让你页面的字体随着不同的屏幕大小而自动适应,我告诉你,你错了!

    这些字体自适应都是人为设置出来的,我推荐的方案是:

    body{font:14px line-height:20px}//网页整体字体以14px为主。

    h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}

    h1{font-size:24px}

    h2{font-size:22px}

    h3{font-size:18px}

    @media only screen and (min-width:360px) {

    body,button,input,select,textarea {font-size:18px;line-height:26px;}

    h1{font-size:28px}

    h2{font-size:26px}

    h3{font-size:22px}

    }

     

    (3)、class类控制分析:

    看到上面大概也了解怎么使用@media了吧;

    另外,定义类名的第一个重要性就在这里了:因为你要控制一个class类在320px或360px不同的屏幕上有适应屏幕大小的样式结构!

     

    (4)、我们开发时,一般要做到兼容的浏览器普遍是国内的浏览器(苹果的浏览器都是webkit内核):UC,QQ,360,百度,这些浏览器是国内使用用户量最大的浏览器厂商,虽然不是内核都一样,但是普遍的兼容问题还不是很多,所以我们优先选择兼容的是webkit内核的。

    (5)、前端开发性能优化(个人总结建议):

    一、单个文件大小不要超过14KB;插件不要超过25KB。

    二、优先选择使用字体图标,非要用上图片的话,就使用CSS Sprite方法。同时,将整合到一张图片的图标集合和在网站或webapp不常用的图片进行压缩。

    三、seo优化问题:我们常写代码时会经常忽略这个标签会带上title,alt等这些可以填上关键词的地方,这个是必须要说明下,不过在手机端的话,这个好像还真用不上吧。

    四、CSS,JS以模块化形式来做项目,CSS:我们可以用@import url('form.css')这样的形式来操作,把多个不同的css来分开写,然后逐个引入;问题是:@import是页面先加载完html再加载css,所以这个你得考量,这个文件是在什么情况下才使用好;JavaScript:我们可以使用sea.js或require.js来操作,网上有相关的指导教程,你可以百度或谷歌一下。

    五、利用CDN技术,减轻空间资源;对企业来讲,这个风险有点大;因为手机用户的网络差时会出现文件不一定能及时加载等问题。

    六、图片多使用PNG8来达到优化效果。

    七、少对图片进行硬性设置宽高。

    八、减少页面请求:CSS,JS,图片数量的多少会对请求有影响;同时要注意class类组合一般情况下不要超过4个,超过的尽量以取个新的class类名来定义会好点。

    九、减少DOM访问次数,加载数量多了就影响访问速度。

    十、不要出现404页面,避免重定向。

    十一、减少cookies体积,设置合理的过期时间。

    十二、缓存ajax,用get方式提交;form以post方式提交。

    展开全文
  • 刚进一家新公司,公司专做手机App的,由于公司业务太多,传统的方法开发app成本太高,每个app要开发几个版本,公司有个想法就是做webApp来代替传统app。我是才接触到webApp的美工一枚。  今天给小伙伴们...
  • 1. viewport:webapp视图 也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域, 这是真正有效的区域。由于移动设备屏幕宽度不同于传统...
  • 移动端webapp基础 2019-06-06 13:51:09
    1、<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=....
  •  jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格。jQuery Mobile1.4.0主要侧重于性能和控件方面的改进。除了全新的默认...
  • 【整理自whh】先来点题外话:实习ing,工作之余想找些开源的项目学习一波,看着慕课实战的项目不错,通过多番寻找在某鱼上面找了一个“HTML5 移动webapp阅读器”学习视频,然后就花了两天时间学习恶补了一波,希望...
  • 移动 WebApp 开发 -- 笔记 2019-07-20 12:33:51
    移动 Web 开发与传统 PC 端开发 跑在手机端的页面(H5页面) 跨平台 基于 webview 告别 IE 拥抱 webkit 更高的适配和性能要求 一、什么是移动web 操作系统 IOS ,Android 网络 2G,3G,4G 有线 ...
  • HTML5+Vue.js+Koa+zepto框架综合实战移动webAPP整站项目完整成型过程 适用人群 从事html5、移动端开发、前端开发、服务端开发、混合式开发的技术人员 课程简介 初步了解和掌握Koa、Vue.js、Zepto的基础知识,熟练...
  • 移动WebApp开发框架 Clouda! 2013-10-16 16:37:15
    ... ...   一、定义 Clouda是简单,可依赖的实时Javascript框架。对一个想开发移动webapp的开发者来说,可以使用clouda开发框架,实现一个功能和体验与native app齐平的轻应用。 二、特点云端统一只用Java...
  • 移动WebApp开发 JS框架对比 2014-01-06 10:09:08
    本次评比的目标是以移动Web App开发为基础的JS框架,会有意的排除部分不适用于移动Web App开发的JS框架,如 jQuery、ExtJS等。希望通过这次评比结果,能找到最合适你移动Web App应用开发的JS框架。   2 ...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 1、说明 运用技术:Vue2.0、Vux、vux-loader、vue-cli、vue-router、vuex 2、效果图 3、实现流程 3.1 搭建框架(需要安装好node.js、npm) 1、快速搭建项目模板 ...因为项目使用vux,所以推荐使用vux官网的...
  • 移动webapp适配方案--rem 2019-05-22 13:48:20
    这是移动 webapp 的最佳的适配方案「目前来说」,既然说是最佳的适配方案,那肯定还有别的适配方案,先看看都有那些适配方案吧 1、viewport缩放「被废弃了」 2、宽度固定两边留白「体验很差」 3、响应式布局「...
  • 移动webapp适配方案大全 2017-06-16 19:40:02
    移动端开发的业务如今发展到已经占据互联网公司的大半壁江山,已经成为互联网公司的核心发展点。APP的和H5配合的混合开发模式已经是注流,那么在开发H5移动端的时候我们应该怎么做?而且做出来的产品是怎么适配个个...
  • 随着HTML5的快速发展,以及大家对于跨平台的移动App开发的渴望,使用PhoneGap开发的需求也会越来越多。根据网络上的资料,并结合自己的实践,搭建了基于phoneGap的android开发环境,把步骤整理出来,持久化到博客,...
  • 移动webapp页面适配方案 2019-01-04 16:58:43
    移动webapp页面适配方案
  • webAPP的实现基础就是html5+js+css3.但是webAPP还是基于浏览器的微网站开发。正是如此,我们必须要深入的... 而APP里面最重要的一个分享功能,分享出去的必须是网页形式的。... ...为什么说HTML5适合进行移动webAPP开发?
  • W3C最新公布了和移动WebApp有关的标准当前的状态及路线图,它汇总了和移动Web App开发相关的所有HTML5和CSS3标准以及他们当前的状态和未来路线,对使用HTML5进行移动Web App开发的开发者有着极大的指导意义。...
  • 基于vue-cli@3.x的移动webapp项目搭建 1.执行vue.create app-name创建一个项目 2.进入到项目目录,如果没有安装router,就执行npm install vue-router -s安装vue-router并写入依赖 3.清除无用的文件,让src目录保持...
  • 这是一个移动webapp的应用,使用angularjs bootstrap ocLazyLoad gulp ui-router,实现一个单页面应用程序,依赖注入,异步装载、模板引擎、前端MVC、路由、模块化
1 2 3 4 5 ... 20
收藏数 16,619
精华内容 6,647