你的位置:首页 > 网页设计

[网页设计]Html5 布局经验分享


移动端的布局与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上面就会换行,比如 在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集;