本文简介：
1、手机移动端页面的自适应
2、手机触摸手动滑动效果

一、header信息的设置（自适应）
　　　1、声明信息 <!DOCTYPE HTML>
　　　2、编码设置 <meta charset="UTF-8"> 
　　　3、移动设备特别设置（重要声明！）
　　　<meta content="width=device-width,user-scalable=no" name="viewport">

Viewport说明：该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备
width=device-width 为设备的宽度.
user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为no
PS:初次尝试制作移动端页面。亲们，由于我没有加上面的viewport声明，结果导致页面狼狈不堪。

二、手机触摸手动滑动效果
1、触摸屏效果滚动组件（js必须包含的部分）

<!--触摸屏效果滑动组件-->

<script type="text/javascript" src="./js/touch.js"></script>

<script type="text/javascript" src="./js/zepto.extend.js"></script>

<script type="text/javascript" src="./js/zepto.ui.js"></script>

<script type="text/javascript" src="./js/slider.js"></script>

<!--触摸屏效果滑动组件end-->

本人亲测以上4个js必须包含，缺一不可。
2、所要在手机端做滑动效果的部位（html代码部分）

<div class="head_nav_C" id="hongye_nav" style="height:60px;">

            <div style="background-color:white;">

                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

            </div>

            <div style="background-color:white;">

                      bbbbbbbbbbbbbbbbbbbbbbbbbbb

            </div>

            <div style="background-color:white;">

                        cccccccccccccccccccccccccccc

            </div>

            <div style="background-color:white;">

                         ddddddddddddddddddddddddd

            </div>

        </div>

3、js代码块（改代码会在动在要加滑动效果的html代码块中自动生成一块代码）

<script>

    Zepto(function($){//自动加载zepto组件

        $("#hongye_nav").slider({//为html 对应的id部分最佳slider属性

            autoPlay    : false, //是否自动

            showDot     : false,

            loop        : true,//是否循环

        });

    })

</script>

4、加载slider.css样式

<link rel="stylesheet" type="text/css" href="css/slider.css" />

附：
另外一种简单的写法(适用于幻灯)
html代码部分
<div id=”fla”>
　　<img lazyload=”images/img2.jpg” />
　　<img lazyload=”images/img3.jpg” />
</div>
2、js代码部分
<script>
//创建slider组件
$('#fla').slider();
</script>

附：小知识
一、字体效果
color:#FFF 定义字体的颜色
text-shadow:0 0 2px #146F61;(css3.0特效)
CSS3.0的文字阴影 text-shadow
语法：text-shadow: h-shadow v-shadow blur color;
也就是
text-shadow：【x轴（x offset） y轴（Y offst） 模糊半径（Blur） 颜色（color）】
例如：text-shadow: 5px 5px 5px #FF0000;

二、盒子模型圆角效果
border-radius 属性
例子：
div
{
border:2px solid;
border-radius:25px;
}
等价于：
div{
border:2px solid;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}

Html5如何使我们开发出来的应用或页面大小能适合各种高端手机使用的更多相关文章

  1. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  2. （转） 浅析HTML5在移动应用开发中的使用

    (转)浅析HTML5在移动应用开发中的使用 (原)http://www.iteye.com/magazines/67   2012-03-07  来自 UECD.163.com  编辑 wangguo ...

  3. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  4. 25 个超棒的 HTML5 & JavaScript 游戏引擎开发库

    就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议.游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实.吸引人眼球.游戏引擎负责其余的事情.早期,游戏开发者通常从草图做起,花费高昂,且不容易 ...

  5. 基于HTML5的SLG游戏开发(序）

          2012年前后,HTML5游戏凭借跨平台.易移植.部署简单.节省成本等优点被炒的火热,经过一两年的快速发展,市场出现了一些成功地HTML5游戏产品,像磊友的<修仙三国>,神奇时 ...

  6. HTML5 前端框架和开发工具【下篇】

    HTML5 前端框架和开发工具[下篇] 快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带 ...

  7. HTML5 2D平台游戏开发#4状态机

    在实现了<HTML5 2D平台游戏开发——角色动作篇之冲刺>之后,我发现随着角色动作的增加,代码中的逻辑判断越来越多,铺天盖地的if() else()语句实在让我捉襟见肘: 这还仅仅是角色 ...

  8. 以太网在汽车行业中的挑战——灵活的接口及软件使ECU开发不再复杂

    以太网在汽车行业中的挑战--灵活的接口及软件使ECU开发不再复杂 以太网将会在一批新车型中作为一个车载系统网络使用.因此,下一步就是以太网和现有汽车网络技术的集成,包括:CAN.FlexRay.LIN ...

  9. 推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库

    推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库 0. 引言 如果你是一个游戏开发者,并且正在寻找一个可以与 JavaScript 和 HTML5 无缝工作的游戏引擎.那么 ...

随机推荐

  1. 使用DirectWrite测量Direct2D文字大小

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 最近在使用Direct2D和DirectWrite写引擎,在引擎中需要实现文本标签控件.但是文本标签的尺寸最好不 ...

  2. 禁用mac Command w

    事情是这样的:历经各种调查,终于定位到了一个bug,正在我准确Command + 数字 切换下iterm2的窗口时,让我懵逼的事情发生了,我们终端不见了,对不见了.心里万马奔腾啊.什么鬼?原来自己误按 ...

  3. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  4. 点餐APP 冲刺一总结

    在冲刺一的过程中,我们小组每个人的任务相对来说都比较轻松,完成的进度也比较快, 主要的原因是每个人分配的任务都比较明确,大家也很积极地去完成.当然啦,我们在实现 项目的过程中也遇到了一些麻烦,主要是最 ...

  5. 移动端前端常见的触摸相关事件touch、tap、swipe等整理

    前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...

  6. C#使用 UdpClient 类进行简单通信的例子

    UdpClient 类提供了一些简单的方法,用于在阻止同步模式下发送和接收无连接 UDP 数据报. 因为 UDP 是无连接传输协议,所以不需要在发送和接收数据前建立远程主机连接.但您可以选择使用下面两 ...

  7. Python基础：函数

    一.概述 二.声明.定义和调用 三.参数 1.参数传递 2.实参类型 3.形参绑定 四.返回值 五.名字空间与作用域 1.基本概念 2.名字空间 3.作用域 4.总原则 六.高级 1.装饰器 2.生成 ...

  8. 合并多个dll为一个dll

    有时候自己写个小工具或者其它啥的物件,引用了好多第三方控件,如log4net,aspnetpager啥的,发布出去让别人看到自己竟然用了这么多的第三方DLL, 会对自己的能力产生怀疑,那有什么办法可以 ...

  9. ugui 获取Text的高度，动态改变高度

    项目中需要根据聊天内容的多少.显示外边框的高度.因为Text的内容是不固定的.但宽度是固定的.高度根据文字多少自增 可以通过Text的属性preferredHeight 获取文本框的高度

  10. C语言动态调用库（转）

    转自:http://cloverprince.iteye.com/blog/481309 现有一个主程序用C语言写成.现在要允许第三方开发人员编写扩展的模块,约定第三方开发的模块必须提供一系列已知名称 ...