移动端的布局与pc端的布局相比 移动端的布局就简单的多,兼容性不必考虑那么多,css3各种特性基本上是可以放肆的写;(个人看法)

本人做移动web 布局一段时间了,把这其中遇到的一些问题总结下来,均是个人看法,各位大牛多多拍砖。。。。。

1.布局肯定使用的是自适应布局,前提是将body的width height 设置成100%;

2.准备好通用的reset.css,移除浏览器的默认样式,使用自定义默认样式,让各个浏览器统一基础样式;

3.准备好head内meta的各个标记,因为这个是必不可少的,下面是我常用的

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="#ffffff" name="msapplication-TileColor">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

4.在做布局前,先分析页面的结构,分层,在脑子里行程自己的思路

然后将一部分布局的结构写下来,写完结构后在写css布局和样式,这样会快很多,一块儿布局做完后再进行 预览 和调试,避免写一行就刷新一次页面看效果,很耽误时间;

5.页面两边留空指定宽度

一般的页面两边都会保留一些空白,这样看上去会自然一些,直接用div ,css 不设置他的宽度为100%,  margin left right =10px 即可,如果设置为width:100%,那么就会将页面撑开,因为本身已经100%了,再加上外边距肯定就超出了;

6.定位用的是最多的了

position:absolute,position:fixed 用的是最多的,同样有些情况可以用float和margin来代替,通过调整margin的值的大小来调整元素的位置;

7.div内float元素,div的高度不会被撑起

如果div wraper内的元素是浮动的,你会发现外层的div的高度是没有的,我最常用的就是设置外层div的overflow:hidden;当然还有其他很多的办法;

8.微信内网页和浏览器里面显示的效果有些很大差异

a:input 设置了readonly后,apple上面点击input 不会弹出键盘,但是android手机上在微信里面打开网页后点击就会弹出键盘,在andorid浏览器内则不会弹出,最后的解决办法只能用span代替,很无奈,不知道有没有好办法;

b:微信内浏览,设置了position后div 内的数字,会被识别成手机号码 颜色也变了,当时找了很久不知道哪里的问题,因为也增加了meta,可根本不管用,一行一行的删,结果是设置了position的问题,最后进行了优化才算处理这个怪咖;

9.media 响应式

全战响应式到是不多,很多小的地方还是需要用到的,比如 一行提示信息需要不换行的显示,在6p上显示 ok,在p5上面就会换行,比如aaarticlea/png;base64,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" alt="" /> 在p5里面肯定显示会换行,所以需要用media来进行控制他的宽度;

10.页面的字体和大小好多都说用rem,本人还没用过这个东西,一直都是不设置他的字体大小,因为默认都是16px,小的字体就用14px,大点的就用18px,再自定义其他即可;

11.元素的click事件,在iphone上面会有延迟500ms,可以用fastclick插件解决,引入这个js后    带上这段代码,缓慢正症状瞬间不见勒

window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);

遗留问题:

1.在做一个im聊天页面的时候,消息输入框在页面最下面采用position:fixed定位到底部,但是在一些手机上经常出现 键盘弹出遮住输入框的情况,有的时候就不会出现,循环交替,通过js动态设置他页面的布局,但是效果不明显,苦苦无法解决,求高手解决!

以上是本人在开发中所见所得和所问,均为个人看法和观点,请高手们拍!  以后想到了其他的  再继续写第2集;

Html5 布局经验分享-第1集的更多相关文章

  1. 来自IOS开发工程师的零基础自学HTML5经验分享

    移动互联网的火爆,而Html具有跨平台.开发快的优势,越来越受到开发者的青睐.感谢IOS开发工程师“小木___Boy”’带来的HTML5学习经验分享. 一.学习途径 1.很多视频网站 比如慕课.和极客 ...

  2. Expression Blend4经验分享:自适应布局浅析

    今天分享一下Blend制作自适应分辨率布局的经验,大家先看下效果图: 这是一个标准的三分天下的布局,两侧的红色区域是背景区域,是用来干吗的呢,下面简单的分析一下,大家就明白了. 1.拿到一个项目,进行 ...

  3. 沉淀,再出发——在Ubuntu Kylin15.04中配置Hadoop单机/伪分布式系统经验分享

    在Ubuntu Kylin15.04中配置Hadoop单机/伪分布式系统经验分享 一.工作准备 首先,明确工作的重心,在Ubuntu Kylin15.04中配置Hadoop集群,这里我是用的双系统中的 ...

  4. Splunk大数据分析经验分享

    转自:http://www.freebuf.com/articles/database/123006.html Splunk大数据分析经验分享:从入门到夺门而逃 Porsche 2016-12-19 ...

  5. 新东方APP技术架构演进, 分布式系统架构经验分享

    今天的演讲题目是"新东方APP技术架构演进, C端技术经验分享" 作者:张建鑫, 曾任IBM高级软件架构师, 滴滴高级技术专家, 现任新东方集团高级技术总监 古代东西方的思想家都产 ...

  6. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  7. Expression Blend4经验分享:制作一个简单的图片按钮样式

    这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...

  8. 线上Linux服务器运维安全策略经验分享

    线上Linux服务器运维安全策略经验分享 https://mp.weixin.qq.com/s?__biz=MjM5NTU2MTQwNA==&mid=402022683&idx=1&a ...

  9. HTML5学堂 全新的HTML5/前端技术分享平台

    HTML5学堂 全新的HTML5/前端技术分享平台 HTML5学堂是做什么的? HTML5学堂~http://www.h5course.com~由多名热爱H5的讲师们组成的一个组织.致力于构建一个前端 ...

随机推荐

  1. Android Partitions Explained: boot, system, recovery, data, cache & misc

    from: http://www.addictivetips.com/mobile/android-partitions-explained-boot-system-recovery-data-cac ...

  2. ruby 把字符串转为正则匹配表达式

    需求 函数,需要通过参数传递字符串,用来做正则匹配 reg = '[0-9]+' def func(str, reg) str.scan(reg) end 由于 reg 在其它地方定义, reg 是字 ...

  3. Elasticsearch aggregations API

    聚合能力 Aggregation API 类似 SQL 中的 GROUP BY 语句,可以以某个字段来进行分组. Aggregation API 支持分级分组,多级的分组过程是由外到里的. Aggre ...

  4. Python基础:1.数据类型(元组)

    提示:python版本为2.7,windows系统 1.元组(Tuple) Tuple,与List类似,但是Tuple一旦初始化之后就不能修改了,没有增加.删除.修改元素. >>> ...

  5. scala学习笔记:match与unapply()

    编写如下代码: object MatchTest { def foo(a : Any) : String = { a match { case 1 => "int:1" ca ...

  6. RabbitMQ 配置文件无法成功应用

    本来想远程启用下Guest账户测试一下(学习),但配置文件修改后总是不成功(没有效果) 过程如下: 1:先找到配置文件地址 不错,很贴心还有说明,在登录账户的AppData下. 2:直接进入对应目录: ...

  7. win2008远程桌面卡顿和上传慢的解决方法

    ibm服务器安装win2008server系统,发现远程桌面登陆特别卡,上传也慢的要死.下载没问题,这样初步判断网络没有问题. 打开注册表(regedit)找到: (1)打开HKEY_LOCAL_MA ...

  8. 修改ckeditor/ckfinder上传文件文件夹 路径以日期格式命名

    修改/ckfinder/config.ascx文件: string dateDir = DateTime.Today.ToString("yyyyMM/"); ResourceTy ...

  9. java多线程总结一:线程的两种创建方式及优劣比较

    1.通过实现Runnable接口线程创建 (1).定义一个类实现Runnable接口,重写接口中的run()方法.在run()方法中加入具体的任务代码或处理逻辑. (2).创建Runnable接口实现 ...

  10. 嵌入式系统关机/Embeded System PowerOff HowTo?

    REFER: 嵌入式Linux实现关机命令 REFER: Embedded File System and power-off REFER: kernel/reboot.c REFER: PowerO ...