html5 移动端单页面布局
&移动端的web网页使用的是响应式设计，但一般我们看到的网站页面都是跳转刷新得到的，比如通过点击一个menu后进入到另一个页面
今天来说下是移动端的单页面的布局。单页面就是一切操作和布局都是在一个页面下进行 不需要页面跳转 ，再通俗的说就是类似于平常的选项卡
但是他又比选项卡要复杂一点 因为他是在手机端 并且当做是一个页面
单页面的作用以及优势：
& & 1.嵌套到native里实现app的混合开发
& & 2.数据量小的页面用单页面便于开发和维护
& & 3.无需跳转页面响应更快
1 页面html结构
&!doctype html&
&html lang=&en&&
& & &meta charset=&UTF-8&&
& & &meta name=&viewport& content=&width=device-width,initial-scale=1 user-scalable=0&/&
& & &title&html5 移动端单页面布局&/title&
& & &!--页面主体部分--&
&div class=&main&&
& & &section class=&curr&&
& & & & &img src=/uploadfile/942.png& alt=&&&
& & & & &img src=/uploadfile/508.jpg& alt=&&&
& & & & &img src=/uploadfile/155.png& alt=&&&
& & & & &img src=/uploadfile/753.jpg& alt=&&&
& & &/section&
& & &section &class=&hide&&
& & & & &img src=/uploadfile/861.jpg& alt=&&&
& & & & &img src=/uploadfile/924.jpg& alt=&&&
& & & & &img src=/uploadfile/651.jpg& alt=&&&
& & & & &img src=/uploadfile/740.png& alt=&&&
& & &/section&
& & &section class=&hide&&
& & & & &img src=/uploadfile/669.png& alt=&&&
& & & & &img src=/uploadfile/415.png& alt=&&&
& & &/section&
& & &section class=&hide&&
& & & & &img src=/uploadfile/869.jpeg& alt=&&&
& & & & &img src=/uploadfile/613.png& alt=&&&
& & & & &img src=/uploadfile/648.png& alt=&&&
& & &/section&
&!--页面菜单按钮--&
&div class=&menu&&
& & & & &li class=&curr&&Html5&/li&
& & & & &li&Css3&/li&
& & & & &li&script&/li&
& & & & &li&About&/li&
&script src=&js/zepto.js&&&/script&
注：页面图片均来自dribbble
demo里面我用的全是图片静态展示 你可以添加自己的结构或动态程序
页面结构跟我们平常写的选项卡没什么区别，接下来我们用css装饰这个结构让他在手机上呈现出页面的效果
/*初始化css*/
*{ margin:0; padding: 0;}
li{ list-style-type:}
img{ max-width: 100%; display: margin: 0 auto 5}
html,body{ width: 100%; height: 100%; background: #e4e4e4;&
& & -webkit-tap-highlight-color: rgba(88,44,22,0.9);
& & -webkit-touch-callout:&
& & -webkit-user-select:
/*主体页面样式*/
.main{ width: 100%; height: position:}
.main section{ width: 100%; height: position: left: 0; top:0; }
.main section.hide{ display:}
.main section.curr{ display:}
/*菜单样式*/
.menu{ width: 100%; height: 45 position: bottom:0; left:0; box-shadow: #2d2d2d 0 0 4background:#0099}
.menu.menucurr{ background: #ea4c88;}
.menu ul{width: 100%; height: 100%; }
.menu li{ width: 24.9%; height: 100%; float: line-height: 45 text-align: background: #0099 color:#}
.menu li.curr{ background: #ea4c88;}
.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;}
移动端的页面多数情况下用百分比或者媒体查询来设置页面的宽高度 这样会达到响应的效果
这里解释几点
1.-webkit-tap-highlight-color: rgba(0,0,0,0);也可以写成-webkit-tap-highlight-color: 去掉点击时高光显示 你也可以更改里面的参数 达到你想要的点击显示高光效果
2.-webkit-touch-callout: //长按页面时不触发菜单
3.-webkit-user-select: //长按无法选择文本 这个很有用 一般如果body里面没有添加这个属性的手机页面 当我们长按某段文字的时候就会出现选中这段文字弹出&复制，全选&等选项 但在webapp开发里 这个就显得很不友好 所以尤其是在webapp开发的时候 为了达到与native一样的真实效果 必须的添加
4.html,body{ width: 100%; height: 100%;} 这个是整个文档的初始化宽高度 后面的子级都是按照这个数据设置
5.main和子级的height都设置为auto 你也可以不用设 但如果你的页面是允许滚动的话最好还是要设一下
6.我们把menu使用固定定位到页面底部 你也可以把他定位在顶部 或任何你想定位的地方
7.menu 里面的tab我们使用的是百分比分配 因为有border-right所以不能很准确的分配多少 这个应该会有什么更精准的方法平均分配 待研究
& & $(function(){
& & & & $(&.menu li&).each(function(index){
& & & & & & $(this).tap(function(){
& & & & & & & & $(this).addClass(&curr&).siblings().removeClass(&curr&);
& & & & & & & & $(&.main section&).eq(index).show().siblings().hide();
& & & & & & & & if(index==3){
& & & & & & & & & & $(&.menu&).addClass(&menucurr&);
& & & & & & & & }else{
& & & & & & & & & & $(&.menu&).removeClass(&menucurr&);
& & & & & & & & }
& & & & & & })
& & & & & & &
& & & & })
& & & 引用的框架是zepto.js 目前移动开发比较流行的js框架 zepto的语法跟jquery是相通的 所以可以按照jquery的写法编写
　　这里的点击menu事件不是使用click而是tap 这是zepto为移动端专门编写的一个点击方法 确切的说应该叫轻触 他比click的点击速度要快 使用的是touch事件 这个在默认的zepto里面是没有的 需要把touch这个模块儿添加进来才可使用tap
& & &这样一个移动端的单页面就完成了
& & &这是个比较简单的单页面
& & &根据这个思维还可以更灵活的编写一些动态的并且更绚丽的页面！
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'移动端 页面布局时需要注意的几项常见要点 - ThinkPHP框架
一、当用户tap一个页面元素时，iOS会在元素周围显示橙色的外框，以表明该元素被tap了。如果你想自己实现tap时的响应效果，可以用以下方法“去除”这个高亮效果
.-webkit-tap-highlight-color: rgba(0,0,0,0);
二、禁止用户选择页面文字.
-webkit-user-select:
三、如果你响应onclick事件，会发现click事件有大约半秒的延迟，这是因为iOS需要等待一段时间来判断用户是点击还是拖动。如想去掉这个延迟，可以用ontouchstart代替onclick
$(&.button&).bind(&touchstart&, handler);
但这样在桌面浏览器中鼠标点击操作就不要用了。没关系，可以做一下判断。
if ('ontouchstart' in window) { // mobile version $(&.button&).bind(&touchstart&, handler); } else { // desktop version $(&.button&).bind(&click&, handler); }
四、禁止用户拖动页面：
(1)当用户tap一个页面元素时，iOS会在元素周围显示橙色的外框，以表明该元素被tap了。如果你想自己实现tap时的响应效果，可以用以下方法“去除”这个高亮效果
.-webkit-tap-highlight-color: rgba(0,0,0,0);
(2)禁止用户选择页面文字.
-webkit-user-select:
(3)如果你响应onclick事件，会发现click事件有大约半秒的延迟，这是因为iOS需要等待一段时间来判断用户是点击还是拖动。如想去掉这个延迟，可以用ontouchstart代替onclick
$(&.button&).bind(&touchstart&, handler);
但这样在桌面浏览器中鼠标点击操作就不要用了。没关系，可以做一下判断。
if ('ontouchstart' in window) { // mobile version $(&.button&).bind(&touchstart&, handler); } else { // desktop version $(&.button&).bind(&click&, handler); }
(4)禁止用户拖动页面：
document.ontouchstart = function(e){ e.preventDefault(); } 5.禁用链接弹出窗口
-webkit-touch-callout:none
五、webkit在渲染页面时，会自动调整字体大小,比如横竖屏切换时;
-webkit-text-size-adjust:
但是如果设置为none,那么会导致页面的缩放功能不能用，最好办法是
-webkit-text-size-adjust:100%;
document.ontouchstart = function(e){ e.preventDefault(); } 5.禁用链接弹出窗口
-webkit-touch-callout:none
六、webkit在渲染页面时，会自动调整字体大小,比如横竖屏切换时;
-webkit-text-size-adjust:
但是如果设置为none,那么会导致页面的缩放功能不能用，最好办法是
-webkit-text-size-adjust:100%;
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
简要分析网站布局时你需要注意些什么？
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口移动端开发技巧二（页面布局和rem）
1.页面适应性布局：
一般来说，适配移动端比较好的布局方式是百分比+rem布局。
百分比的优势在于，同一个百分比的真实尺寸会跟随屏幕大小变化。例如：
红色框里的部分，如果要求为一行4个板块，适应任何屏幕。那么，用ul，li写html，然后布局，如果写定ul的宽度是100%，li的宽度是25%，再设置box-sizing：border-box的话，各种屏幕下，这四块都是平分且不会出现横向滚动条。不过要注意，这个时候的间距就不要用margin-left和margin-right来撑开，而是要用padding。
代码如下：
&&& width:
margin-bottom: 10
&&& width:
&&& box-sizing:
border-&&&&&&&&&//box-sizing是规定两个并排的带边框的框，设置
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
box-sizing可以使并排排列
在介绍rem之前，先来回顾一下px和em。
（1）px为单位
在Web页面初期制作中，我们都是使用“px”来设置文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们的Web页面时改变了浏览器的字体大小，这时会使我们的Web页面布局被打破。这样的话，对于那些关心自己网站可用性的开发者来说，就是一个大问题了。在这样的前提下，就提出了使用“em”来定义Web页面的字体。
（2）em为单位
使用em时需要一个参考点，一般都是以(body)的“font-size”为基准。比如说当我们使用“1em”等于“10px”来改变默认值“1em=16px”时，会使换算变得简单。这样一来，当要设置“14px”的字体大小时，只需要将其值设置为“1.4em”即可。
其中设置的62.5%可以理解为16X62.5%=10，这样原来的默认值1em=16px变变为1em=10px。
（3）rem为单位
的出现，引进了一些新的，其中就包括。
前面提到“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，当我们多次使用时，就可能会带来无法预知的错误风险。而是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，，在根元素中设置多大的字体，这完全可以根据自己的需要。
&&& font-size:
62.5%;&&&&&&&&&&&&&&&&&
//16px*62.5%=10px,通过此设置，相当于改变了
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
1em=16px为1em=10px，方便换算
&&& font-size:
1.4rem;&&&&&&&&&&&&&&&&//1.4*10px=14px
&&& font-size:
2.4rem;&&&&&&&&&&&&&&&//2.4*10px=24px
&上面代码中
在根元素( html
)中定义了一个基本字体大小为62.5%，从计算结果可以得出，使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。
然后我们可以再用@media写一下不同尺寸下根元素html的font-size即可。
&3.rem的兼容性
&、、、和都支持，IE6-8无法支持。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}