本文简介：
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. sql server 脚本创建数据库邮件

    sql server 脚本创建数据库邮件代码: --脚本创建数据库邮件 --1.开启数据库邮件 RECONFIGURE WITH OVERRIDE GO RECONFIGURE WITH OVERRI ...

  2. sitemesh学习笔记(1)

    最近在学习web开发的时候,发现很多的页面都存在同样的导航栏,登陆栏,js,jQuery等等相同的元素.这样就感觉开发变得好臃肿啊,并且,有时候改一个元素,就要把所有包含这个元素的页面全部重新码一遍, ...

  3. 组合数学 - 波利亚定理 --- poj : 2154 Color

    Color Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7873   Accepted: 2565 Description ...

  4. MVC WebApi跨域ajax接受post数据笔记

    后端api代码示例: [HttpPost] public string callbackUrl([FromBody]SZRCallBackModel cbm) { try { if (cbm == n ...

  5. JS获取html对象的几种方式说明

    document.getElementById("zx"); 通过ID获取html元素对象,ID号在html文档当中应该是唯一的.返回的是唯一element对象.并且所有浏览器都兼 ...

  6. csharp: WebBrowser read baidumap

    setpoint.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ ...

  7. jquery 回到 顶部

    1. 页面内容较多, 从底部超链接 点击回到页面顶部 // 回到顶部 var $top = $('<a class="doc-gotop" href="javasc ...

  8. jquery checkbox checked

    1.question: when first operate the checkbox with sentence like : $("input[type=checkbox]") ...

  9. percona 5.6升级到5.7相关error及解决方法

    今早,把开发环境的mysql升级到了5.7.15,5.6数据导入后,启动一切正常,检查.err日志,发现有如下异常: 2016-10-31T00:29:33.187073Z 0 [Warning] S ...

  10. JSON的三种解析方式

    一.什么是JSON? JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度. JSON就是一串字符串 只不过元素会使用特定 ...