Html5 布局经验分享-第1集

时间:2023-01-04 08:26:07

移动端的布局与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&period;04中配置Hadoop单机&sol;伪分布式系统经验分享

    在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&sol;前端技术分享平台

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

随机推荐

  1. 调用WebServices超时

    1. 服务器端设置超时 在 web.config 的 system.web 里添加如下配置项: < httpRuntimeexecutionTimeout="300000"/ ...

  2. ajax调用本地wcf中的post和get

    我们可以通过jQuery调用本地或者远程的wcf服务,本文讲解的是对本地wcf服务的post和get调用方式. post和get到底有什么区别呢?此处不作详述. 但是,post对请求的数据格式更为严格 ...

  3. STL 小白学习(5) stack栈

    #include <iostream> #include <stack> //stack 不遍历 不支持随机访问 必须pop出去 才能进行访问 using namespace ...

  4. Luogu4221 WC2018州区划分(状压dp&plus;FWT)

    合法条件为所有划分出的子图均不存在欧拉回路或不连通,也即至少存在一个度数为奇数的点或不连通.显然可以对每个点集预处理是否合法,然后就不用管这个奇怪的条件了. 考虑状压dp.设f[S]为S集合所有划分方 ...

  5. python学习笔记&lowbar;week16

    note 作业问题: 1.写页面觉得丑(布局) float,clear:both,margin,padding,position:left...网上找模板:HTML模板,BoostStrap 2.背景 ...

  6. 将本地已有项目上传到github

    1.在github上创建一个文件 2.看本地C盘中是否有.ssh文件夹 (C:\Users\用户名\.ssh) 检测有没有.ssh文件夹:执行命令   cd ~/.ssh 如果没有的话执行git命令: ...

  7. 用pip安装python 模块OpenSSL

    windows下 1.配置好pip命令 下载安装 pip‑1.5.6.win‑amd64‑py2.7.exeor pip‑1.5.6.win32‑py2.7.exe 装好在C:\Python27\Sc ...

  8. Apache服务器添加网站目录不在根目录的情况

    Apache原本根目录: /var/www 需要添加的新的Apache网站目录 /home/*** 在Apache服务器虚拟配置下添加一个站点 <VirtualHost *:> Serve ...

  9. Python自动化运维 - Django(二)Ajax基础 - 自定义分页

    Ajax基础 AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 什么是Ajax AJAX = 异步 Java ...

  10. (2)ansible主机清单文件inventory

    1)inventory作用 作用:通常用于定义要管理主机的认证信息,例如ssh登录用户名,密码等相关信息 缺省文件:/etc/ansible/hosts 2)定义主机组方式 #vim /etc/ans ...