精华内容
下载资源
问答
  • 移动端web开发

    2019-09-10 19:10:34
    1、 移动web开发(pc的页面用手机浏览器开) ...因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性 2、 web app开发(web应用程序) 特指的是用html5技术开发,之所以叫web ...

     

    1、 移动web开发(pc端的页面用手机浏览器开)

    这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性

    2、 web app开发(web应用程序)

    特指的是用html5技术开发,之所以叫web app是因为他比较接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能(比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能).

     

    一、meta标签

    html代码中最关键的就是meta标签设置,开发移动端页面首先一定要设置viewport (可视区域)

    device-width - 设备的宽度

    initial-scale - 初始的缩放比例 

    minimum-scale - 允许用户缩放到的最小比例  

    maximum-scale - 允许用户缩放到的最大比例 

    user-scalable - 用户是否可以手动缩放

    其次是一些辅助优化功能,常用的有如下meta标签:

     

    下面延伸一下<meta>标签的作用

    meta标签是元素可提供相关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部,不包含任何内容。

    meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能

    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

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

     

    也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集;可以设定页面格式及刷新等等。

     

    name属性

    主要有以下几种参数:

    (1)Keywords(关键字)

    说明:keywords用来告诉搜索引擎你网页的关键字是什么。提高网站的访问量

    举例:

    <meta name ="keywords"content="science,education,culture,politics,ecnomics,relationships,entertainment,human">

    (2)description(网站内容描述)

    说明:description用来告诉搜索引擎你的网站主要内容。

    网站内容描述(description)的设计要点:

    ①网页描述为自然语言而不是罗列关键词(与keywords设计正好相反);

    ②通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息;

    ③网页描述中含有有效关键词;

    ④网页描述内容与网页标题内容,主题内容有高度相关性;

    ⑤网页描述的文字不必太多,一般不超过搜索引擎检索结果摘要信息的最多字数(通常在100中文字之内,不同搜索引擎略有差异)。

    举例:<meta name="description" content="This page isabout the meaning of science,education,culture.">

    (3)robots(机器人向导)

    说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

    content的参数有all,none,index,noindex,follow,nofollow。默认是all。

    举例:<meta name="robots"content="none">

    (4)author(作者)

    说明:标注网页的作者

     

    http-equiv属性

    相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值

    (1)content-Type(显示字符集的设定)

    说明:设定页面使用的字符集。

    用法:<meta http-equiv="content-Type"content="text/html; charset=gb2312">

    (2)content-Language(当浏览者访问你的网页时,浏览器会自动识别并设置网页中的语言)

    用法:<metahttp-equiv="Content-Language" content="zh-cn" />

    (3)Expires(期限)

    说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

    用法:<meta http-equiv="expires"content="Fri,12 Jan 2001 18:18:18 GMT">

    注意:必须使用GMT的时间格式。

    (4)Pragma(cache模式)

    说明:禁止浏览器从本地计算机的缓存中访问页面内容。

    用法:<meta http-equiv="Pragma"content="no-cache">

    注意:这样设定,访问者将无法脱机浏览。

    (5)Refresh(刷新)

    说明:自动刷新并转到新页面。

    用法:<meta http-equiv="Refresh" content="2;URL">;(注意后面的分号,分别在秒数的前面和网址的后面,URL可为空)

    注意:其中的2是指停留2秒钟后自动刷新到URL网址。

    (6)Set-Cookie(cookie设定)

    说明:如果网页过期,那么存盘的cookie将被删除。

    用法:<meta http-equiv="Set-Cookie"content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT;path=/">

    注意:必须使用GMT的时间格式。

    (7)Window-target(显示窗口的设定)

    说明:强制页面在当前窗口以独立页面显示。

    用法:<meta http-equiv="Window-target"content="_top">

    注意:用来防止别人在框架里调用自己的页面。

    展开全文
  • 移动web开发

    2019-03-25 21:36:18
    1、 移动web开发(pc的页面用手机浏览器打开) ...因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性 2、 web app开发(web应用程序) 特指的是用html5技术开发,之所以叫web app是因...

    1、 移动web开发(pc端的页面用手机浏览器打开)

    这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性

    2、 web app开发(web应用程序)

    特指的是用html5技术开发,之所以叫web app是因为他比较接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能(比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能).

    一、meta标签

    html代码中最关键的就是meta标签设置,开发移动端页面首先一定要设置viewport (可视区域)

    device-width - 设备的宽度

    initial-scale - 初始的缩放比例

    minimum-scale - 允许用户缩放到的最小比例

    maximum-scale - 允许用户缩放到的最大比例

    user-scalable - 用户是否可以手动缩放

    其次是一些辅助优化功能,常用的有如下meta标签:

    下面延伸一下标签的作用

    meta标签是元素可提供相关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部,不包含任何内容。

    meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能

    也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集;可以设定页面格式及刷新等等。

    name属性

    主要有以下几种参数:

    (1)Keywords(关键字)

    说明:keywords用来告诉搜索引擎你网页的关键字是什么。提高网站的访问量

    举例:

    (2)description(网站内容描述)

    说明:description用来告诉搜索引擎你的网站主要内容。

    网站内容描述(description)的设计要点:

    ①网页描述为自然语言而不是罗列关键词(与keywords设计正好相反);

    ②通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息;

    ③网页描述中含有有效关键词;

    ④网页描述内容与网页标题内容,主题内容有高度相关性;

    ⑤网页描述的文字不必太多,一般不超过搜索引擎检索结果摘要信息的最多字数(通常在100中文字之内,不同搜索引擎略有差异)。

    举例:

    (3)robots(机器人向导)

    说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

    content的参数有all,none,index,noindex,follow,nofollow。默认是all。

    举例:<meta name="robots"content=“none”>

    (4)author(作者)

    说明:标注网页的作者

    http-equiv属性

    相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值

    (1)content-Type(显示字符集的设定)

    说明:设定页面使用的字符集。

    用法:<meta http-equiv="content-Type"content=“text/html; charset=gb2312”>

    (2)content-Language(当浏览者访问你的网页时,浏览器会自动识别并设置网页中的语言)

    用法:<metahttp-equiv=“Content-Language” content=“zh-cn” />

    (3)Expires(期限)

    说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

    用法:<meta http-equiv="expires"content=“Fri,12 Jan 2001 18:18:18 GMT”>

    注意:必须使用GMT的时间格式。

    (4)Pragma(cache模式)

    说明:禁止浏览器从本地计算机的缓存中访问页面内容。

    用法:<meta http-equiv="Pragma"content=“no-cache”>

    注意:这样设定,访问者将无法脱机浏览。

    (5)Refresh(刷新)

    说明:自动刷新并转到新页面。

    用法:;(注意后面的分号,分别在秒数的前面和网址的后面,URL可为空)

    注意:其中的2是指停留2秒钟后自动刷新到URL网址。

    (6)Set-Cookie(cookie设定)

    说明:如果网页过期,那么存盘的cookie将被删除。

    用法:<meta http-equiv="Set-Cookie"content=“cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT;path=/”>

    注意:必须使用GMT的时间格式。

    (7)Window-target(显示窗口的设定)

    说明:强制页面在当前窗口以独立页面显示。

    用法:<meta http-equiv=“Window-target"content=”_top">

    注意:用来防止别人在框架里调用自己的页面。

    展开全文
  • 在浏览器中进行的网页开发,最终代码具有跨系统平台的特性。 web app开发特指的是用html5技术开发,之所以叫web app是因为它与客户端应用程序很相似,可以和系统深度融合,调用一些只有客户端才能调用的功能(利用...

    移动web和pc端web以及web app

    移动web开发跟web前端开发差别很小,使用的技术都是html+css+js。手机网页可以理解成pc网页的缩小版加一些触摸特性。在浏览器中进行的网页开发,最终代码具有跨系统平台的特性。

    web app开发特指的是用html5技术开发,之所以叫web app是因为它与客户端应用程序很相似,可以和系统深度融合,调用一些只有客户端才能调用的功能(利用html5开发出的网页可以访问电话、相机等功能).

    进行移动端web开发要在头部添加这样一段代码

        <meta name="viewport" content="width=device-width,initial-scale=1,
      user-scalable=no"/>

     viewport    表示网页视口

    width=device-width   网页宽度等于设备宽度

    initial-scale =1    网页初始的缩放比例 为1(不缩放))

    user-scalable   用户是否可以手动缩放

    Flexbox(弹性布局)

    原文链接:http://caibaojian.com/flexbox-guide.html

    弹性布局(flexible box)模块(目前是w3c候选的推荐)旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。·

     

    弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。

     

    最重要的是弹性盒子布局与方向无关,相对于常规的布局(块是垂直和内联水平为基础),很显然,这些工作以及网页设计缺乏灵活性,无法支持大型和复杂的应用程序(特别当它涉及到改变方向,缩放、拉伸和收缩等)。

     

    注意: Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局。

    来源:前端开发博客

    最常用的Flexbox设置

    <style>
        .box{
                /*设置弹性布局*/
                display:flex;
                /*主轴方向的对齐方式*/
                justify-content: space-around;
                /*交叉轴方向的对齐方式*/
                align-items:center;
                heigth:300px;
                border:1px solid purple;
                }
        .box div{
                width:20px;
                heigth:20px;
                background-color:pink;
                }
    </style>

    下面介绍一下Flexbox常用的六个属性

    flex-direction属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。

    • row:默认值。灵活的项目将水平显示,正如一个行一样。
    • row-reverse:与 row 相同,但是以相反的顺序。
    • column:灵活的项目将垂直显示,正如一个列一样。
    • column-reverse:与 column 相同,但是以相反的顺序。

    flex-wrap属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

    • nowrap:默认值。规定灵活的项目不拆行或不拆列。
    • wrap:规定灵活的项目在必要的时候拆行或拆列.
    • wrap-reverse:规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。

     flex-flow复合属性。设置或检索弹性盒模型对象的子元素排列方式

    • flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
    • flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
    • flex-direction 属性规定灵活项目的方向。
    • flex-wrap 属性规定灵活项目是否拆行或拆列。
    • 注意:如果元素不是弹性盒对象的元素,则 flex-flow 属性不起作用。

    justify-content属性定义了项目在主轴上的对齐方式

    它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    align-items属性定义项目在交叉轴上如何对齐

    它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度

    align-content在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。

     

    stretch

    默认值。元素被拉伸以适应容器。

    各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。

    在其它情况下,剩余空间被所有行平分,以扩大它们的侧轴尺寸。

     
    center

    元素位于容器的中心。

    各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,

    保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容

    边界与第最后一行之间的距离相等。

    (如果剩下的空间是负数,则各行会向两个方向溢出的相等距离。)

     
    flex-start

    元素位于容器的开头。

    行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性

    盒容器的侧轴起始边界,之后的每一行都紧靠住前面一行。

     
    flex-end

    元素位于容器的结尾

    各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该

    弹性盒容器的侧轴结束边界,之后的每一行都紧靠住前面一行。

     
    space-between

    元素位于各行之间留有空白的容器内。

    各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行,该

    值等效于'flex-start'。在其它情况下,第一行的侧轴起始边界紧靠住弹性盒容器的

    侧轴起始内容边界,最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界

    ,剩余的行则按一定方式在弹性盒窗口中排列,以保持两两之间的空间相等。

     
    space-around

    元素位于各行之前、之间、之后都留有空白的容器内。

    各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果

    剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。在其它情况下,

    各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前

    面及最后一行后面的空间是其他空间的一半。

    下面来个实例

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <!--设置视口-->
     6     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
     7     <title>九宫格效果实现</title>
     8     <style>
     9         body{
    10             margin: 0;/*设置边距,可以有1~4个值*/
    11         }
    12         /*box 设置为弹性盒模型*/
    13         .box{
    14             display: flex;
    15             flex-wrap: wrap;/*设置换行*/
    16         }
    17         /*每个item 也设置为弹性盒模型*/
    18         .box .item{
    19             font-size: 14px;/*font-size属性设置字体大小*/
    20             padding: 20px 0;/*padding属性设置内边距,此处为简写,上下填充20px,左右0*/
    21             display: flex;
    22             flex-direction: column;/*flex-direction属性规定灵活项目的方向,此处为垂直显示*/
    23             align-items: center;/*align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。*/
    24             width: 33.3333%;
    25             box-sizing: border-box;/*设置盒子大小(边框以内为盒子的内容区大小)*/
    26             border-right: 1px solid #eeeeee;/*设置边框线*/
    27             border-bottom: 1px solid #eeeeee;
    28         }
    29         /*用nth-child(N)选择器去除3,6,9位置盒子的右边框*/
    30         .box .item:nth-child(3n) {
    31             border-right: none;
    32         }
    33         .box .item img{
    34             margin-bottom: 10px;
    35             width: 30px;
    36         }
    37     </style>
    38 </head>
    39 <body>
    40 
    41     <div class="box">
    42         <div class="item">
    43             <img src="icons/grid-01.png" alt=""/>
    44             <span>美食</span>
    45         </div>
    46         <div class="item">
    47             <img src="icons/grid-02.png" alt=""/>
    48             <span>洗浴</span>
    49         </div>
    50         <div class="item">
    51             <img src="icons/grid-03.png" alt=""/>
    52             <span>结婚啦</span>
    53         </div>
    54         <div class="item">
    55             <img src="icons/grid-04.png" alt=""/>
    56             <span>卡拉OK</span>
    57         </div>
    58         <div class="item">
    59             <img src="icons/grid-05.png" alt=""/>
    60             <span>找工作</span>
    61         </div>
    62         <div class="item">
    63             <img src="icons/grid-06.png" alt=""/>
    64             <span>辅导班</span>
    65         </div>
    66         <div class="item">
    67             <img src="icons/grid-07.png" alt=""/>
    68             <span>汽车保养</span>
    69         </div>
    70         <div class="item">
    71             <img src="icons/grid-08.png" alt=""/>
    72             <span>租房</span>
    73         </div>
    74         <div class="item">
    75             <img src="icons/grid-09.png" alt=""/>
    76             <span>装修</span>
    77         </div>
    78     </div>
    79 
    80 </body>
    81 </html>

    效果图

     

    转载于:https://www.cnblogs.com/xiaoyezideboke/p/10757655.html

    展开全文
  • 这篇文章只是我深入了解移动领域开发过程中的不断整理和总结,其中涉及到很多概念,观点,个人的看法,有不确切的地方,欢迎指正。 首先要明确移动web和webapp是不同的 ...手机网页可以理解pc

    这篇文章只是我深入了解移动领域开发过程中的不断整理和总结,其中涉及到很多概念,观点,个人的看法,有不确切的地方,欢迎指正。


    首先要明确移动web和webapp是不同的


    1:移动web开发


    这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是三足鼎立IEfirefox  chorme。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性。


    2:web App开发

    特指的是用html5技术开发,之所以叫web app是因为他比较接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能(比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能)


    那么PCweb开发与移动web开发区别在于什么?

    1

    面向人群来说


    l  从用户角度:pc端主要使用鼠标,鼠标的操作尺度比较小,点击是一件准确的事情;而移动端web上主要是触屏,触屏的操作尺度就比较大,点击误差大,所以元素必须往大了做,也不支持hover事件。这一点淘宝网页的PC版和手机web版是个非常良好的例子。PC淘宝中有些小按钮能放下的功能,移动版就必须另弹界面让用户详细输入。


    ll   从开发人员角度:UI(网页用户界面)设计师要考虑到移动端特点,便于触屏操作。至于代码实现效果时基本差不多。

    2

    MVC


    M:模型,即HTML代码,移动web会更关注meta标签,通过这些标签我们会定制我们移动web开发的一些行为和样式。


    V:即css语言,这两者会存在非常大的不同,进入移动web开发,会发现安卓设备和苹果设备的分辨率会存在分辨适配的问题,而pc上只需要写死一个宽度就差不多。PC端咱们最常用的就是固定宽度,但移动端就不能这么用了,因为很多网页都是可以横屏看,也可以竖屏看;很多屏幕的分辨率不一样;所以只要牵涉到移动端,就要牵涉到响应式(也叫自适应); 

     

    C:js,这个题主应该更详细一些,因为有没有canvas对js影响很大;

    第一、普通移动端网页(比如手机新浪网,手机淘宝,手机百度等)这个在js方面和PC端区别不是太大;主要的区别在于移动端没有了鼠标悬停(onmouseover);点击(onclick)还可以用;多了触摸、滑动。

    第二、canvas相关游戏

    canvas相关的html5增加了好多js,不过我不做游戏方面,所以就不多废话了;


    展开全文
  • 1、移动web开发 ...因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性。 2、web app开发 特指的是用html5技术开发,之所以叫web app是因为他比较接近客户端应用程序的用户体验...
  • 移动端web开发笔记(一)

    万次阅读 多人点赞 2018-07-15 20:33:43
    先搞清楚两个概念,移动端web开发web app开发1、 移动web开发(pc的页面用手机浏览器打开)这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc是IE的天 下。手机...
  • 前端工作不仅仅只是网页的制作,还有微网站、APP的制作,游戏制作,例如可以将你开发Web页面直接打包成手机使用的APP应用,游戏的互动界面更是以前端开发技术为主。大规模的公司把这些分得很细,所以,你可以精通...
  • 前端工作还不仅仅只是网页的制作,还有微网站、APP的制作,游戏制作,例如可以将你开发Web页面直接打包成手机使用的APP应用,游戏的互动界面更是以前端开发技术为主。大规模的公司把这些分得很细, web前端的岗位
  • 前端工作不仅仅只是网页的制作,还有微网站、APP的制作,游戏制作,例如可以将你开发Web页面直接打包成手机使用的APP应用,游戏的互动界面更是以前端开发技术为主。大规模的公司把这些分得很细,web前端学习并不...
  • 目录试题一(30分)试题二(24分)试题三(20分)...慧谷阳光公司网站希望做跨设备跨浏览器响应式网站,可以一次开发就可在pc端,pad端,手机端任意浏览,因此采用bootstrap响应式布局方式控制网站头部和内容栅格。
  • EKECMS网站管理系统(电脑端 手机端),以下简称EKECMS。 EKECMS是基于eFrameWork快速开发框架下的应用,主要目的是用于eFrameWork框架的使用示例,功能较全但平面较老,大家可根据实际项目要求进行修改及扩展。 ...
  • 随着信息技术不断发展,前端技术的发展也经历...前端工作还不仅仅只是网页的制作,还有微网站、APP的制作,游戏制作,例如可以将你开发Web页面直接打包成手机使用的APP应用,游戏的互动界面更是以前端开发技术为主。
  • 随着信息技术不断发展,前端技术的发展也经历了...前端工作还不仅仅只是网页的制作,还有微网站、APP的制作,游戏制作,例如可以将你开发Web页面直接打包成手机使用的APP应用,游戏的互动界面更是以前端开发技术为主
  • 因为在PC端,大部分页面效果我们都可以设置固定尺寸,但是在手机端,这种方案是不可行的,我们必须要按照百分比呈现页面,才能保证网页在任何设备上可以正常显示。 为了实现这样的功能,我们可以将所有的尺寸都...
  • 鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
  • 具体为将DHT11传感器接收到信息通过转化得到数据后编译可以被MQTT发送至显示端可被执行地形式后进行显示,手机端/PC端通过paho-mqtt实现Android显示、执行打开关闭开关功能,PC端由web实现网页显示云数据库内保存...
  • 移动web摘要

    2019-06-18 17:42:07
    1、移动web开发(pc的页面用手机浏览器打开)这部分...因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性。 2、web app开发(web应用程序)特指的是用html5技术开发,之所以叫web app是因为他比...
  • Vue是前端快速开发框架,Javascript+手机UI,就可以迅速开发网页应用(WebApp)一般情况下,作为演示网站、微信后台等等,也够用了Weex作为一次开发,三可用(Web、安卓、IOS),应该不错,不过现在还没正式版偶尔碰到...
  • 移动端开发笔记

    2019-03-18 08:28:35
    1、 移动web开发(pc的页面用手机浏览器打开) ...因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性 2、 web app开发(web应用程序) 特指的是用html5技术开发,之所以叫web ap...
  • 随着雪亮工程、明厨亮灶、手机看店、智慧幼儿园监控等行业...另外EasyNVR增值功能是可通过接口二次集成在自己的原有的web业务系统实现网页、H5无插件实时直播,但是用户一直困惑于如何获取直播链接通道和直播保活链接
  • 书名:《Java Web开发实战1200例(第I卷)》(清华大学出版社.卢瀚.王春斌) PDF格式扫描版,全书分为6篇23章,共909页。2011年1月出版。 注:原书无书签。为了方便阅读,本人在上传前添加了完整的书签。 全书压缩打包...
  • 移动web学习笔记(1)

    2016-09-11 23:42:55
    在PC浏览网页时,网页页面是很大的,显示在手机上时,会被缩放。为了解决因缩放导致的问题,我们需要在网页中设置viewport。   设置宽度 width 设置和设备一样宽度 device-width  设置默认的...
  • 独立开发出一款web应用 微宝创业,惭愧的说: 项目架构从文明时代 -> 走到最后的工业时代!不断的重构,不断的上线 ,拼命的学习,我很感谢当时老板对我的信任和同事对我的帮助。 ...
  • 网站项目打包app

    2020-11-22 15:37:49
    HBuilderX:可直接将网页打包成手机端app,可以有安卓和苹果两种安装包,这次我们主要讲的是安卓的打包,苹果的打包需要IDP/IEP证书。 废话不多说,我们现在开始操作: 1.首先我们要先安装HBuilderX,这里的安装包,...
  • EKECMS网站管理系统(电脑端+手机端),以下简称EKECMS。 EKECMS是基于eFrameWork快速开发框架下的应用,主要目的是用于eFrameWork框架的使用示例,功能较全但平面较老,大家可根据实际项目要求进行修改及扩展。 ...
  • 现在移动互联网越来越发达,很多的网站都普及了手机端浏览,为了更好的让网页手机端显示,我们都选择了使用CSS媒体查询制作响应式模版,但这也有弊端,例如某些网站的结构是CMS类型的,太多的内容要显示,而使用...
  • 在这个网络发达的社会,人们基本都是手机不离身,很多手机用户平时都会使用APP应用,APP可以分为网页封装的APP和原生开发的APP,对于这点,很多人还是比较迷茫的,那么我们在使用时如何辨别这款APP是网页封装还是...
  • 但是平时开发我们只要告诉浏览器使用它的理想视口(也就是上面那行代码),就没问题了。 总结 <ul><li>桌面中浏览器窗口就是约束你的css布局窗口,它也决定用户可以看到什么</li><li>在手机...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

web网页开发成手机端