一、测试工具：1.Chrome 2.Opera Mobile
二、分辨率：一般现代手机最小320px，最大640px。
三、
全屏流体设计：
1.腾讯新闻：http://xw.qq.com/
2.途牛旅游：http://m.tuniu.com/

固屏类流体设计
1.京东商城：http://m.jd.com/
2.淘宝网：http://m.taobao.com/（全屏+固屏，导航一般用全屏）

四、<meta>标签，放在<head>之间
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

name="viewport" //窗口设定
width=device-width //页面大小屏幕等宽
initial-scale=1.0 //初始缩放比例，1.0 表示原始比例大小
minimum-scale=1.0 //允许缩放的最小比例
maximum-scale=1.0 //允许缩放的最大比例
user-scalable=no //用户是否可以缩放，这里 no 表示不可以

五、rem
网页默认字体大小为16px，如果想设置为10px，用百分比则为10/16*100%=62.5%，所以在html中设置字体大小为62.5%，即10px，那么下面的其它元素都用rem作为单位，那么10px就是1rem，14px就是14*1/10=1.4rem。
同理，如果里面一个p的字体大小想设置为24px，那么2.4rem。
兼容性：IE9+，以及现代主流浏览器。

所有的单位像素都换成rem，区块和图片缩放用百分比。

六、图片自适应，并居中：
img{display:block;max-width:100%;margin:0 auto;}

七、媒体查询

/*媒体查询，部分参考bootstrap框架*/
/*当页面大于1200px时，大屏幕，主要是PC端*/
@media(min-width:1200px){

}
/*当页面大于992px，小于1199px之间时，中等屏幕，分辨率低的PC*/
@media(min-width:992px)and(max-width:1199px){

}
/*当页面大于768px，小于991px之间时，小屏幕，主要是pad*/
@media(min-width:768px)and(max-width:991px){

}
/*当页面大于480px，小于767px之间时，超小屏幕，主要是手机*/
@media(min-width:480px)and(max-width:767px){

}
/*当页面小于480px时，微小屏幕，更低分辨率手机。*/
@media(max-width:479px){

}

八、box-sizing属性（当给一个区块设置padding值时，区块的宽高可以保持不变）
div{box-sizing:border-box;}

九、清理浮动
一个div清理浮动之后，在设置上下外边距就没有效果了，这是解决方法是在上面浮动元素的末尾加上一个空div，再利用伪元素进行清除浮动。
<div class="clearfix"></div>
.clearfix::after{content:".";display:block;height:0;clear:both;visibility:hidden;}

十、超出文字不换行，用省略号表示
{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

但这是webkit的私有属性，解决的两一个方法：在文字外面包裹一个div，设置它的css

div{height:  ;overflow:hidden;}

十一、如果5个链接，按照顺序排列： ABCDE，结果加上{float:right}之后，顺序就变成了EDCBA。
当A遇到Float，则命令它向右跑去。当B遇到Fooat，同上，但此时最右边位置已经被A占了，所以B只能在A 左边。。。。CDE依次。因此就倒序了。
解决方法之，套个外围标签：复制内容到剪贴板代码:<div style="float:right; border:solid 1px red;"> <b>A</b> <b>B</b> <b>C</b> <b>D</b> <b>E</b></div>

十二、让导航栏固定在窗口顶部，在最上层，始终可见
header{position: fixed;top:0;z-index:9999;}
还要在下面空出45像素距离，.bottom{padding-top:45px;}

十三、超出两行则用省略号表示(一行、两行、三行……同理)（webkit的私有属性）
{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

十四、若内容太满，在小窗口中为隐藏，用媒体查询，设置display:none;

十五、设置大小尽量不用绝对像素，改为宽度百分比，高度自适应。或者只用padding控制大小。

十六、css透明度设置（兼容所有浏览器）

transparent_class {

filter:alpha(opacity=50);  /*IE滤镜，透明度50%*/

-moz-opacity:0.5;  /*Firefox私有，透明度50%*/

-khtml-opacity: 0.5;

opacity: 0.5;  / *其他，透明度50%*/

}

十七、实现背景透明，文字不透明：

方法一、整两个DIV放在一个位置，不透明DIV放上面透明DIV放下面

1.把背景图当独放在一个div中，绝对定位，z-index:0，使用opacity设置不透明度
2.内容在另外一个div，绝对定位，z-index:1

方法二、使用css3的background-color:rgba();

input {background-color:#ff0000;opacity:.5;}

这种方式会让输入框的背景色变成50%透明度的红色，但输入框的的文字不受任何影响。

十八、粗体文本

HTML5 规范声明：应该使用<h1> - <h6> 来表示标题，使用 <em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。在没有其他合适标签更合适时，才应该把 <b> 标签作为最后的选项。

十九、box-sizing:border-box;

把边框和内边距包括在内，当设置padding的时候不用重新计算。

html5移动端制作知识点总结的更多相关文章

  1. HTML5移动端图片左右切换动画

    插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...

  2. html5 移动端单页面布局

    序     移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是 ...

  3. 第九十一节，html5+css3pc端固定布局，完成首页

    html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...

  4. 第九十节，html5+css3pc端固定布局，底部区域，说明区域，版权区域

    html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...

  5. 第八十九节，html5+css3pc端固定布局，热门旅游取，标题介绍区，旅游项目区

    html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...

  6. 第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框

    html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...

  7. 第八十七节，html5+css3pc端固定布局，大纲算法，section和div，结构分析

    html5+css3pc端固定布局,大纲算法,section和div,结构分析 一．大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...

  8. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  9. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

随机推荐

  1. ACM第四站————最小生成树（克鲁斯卡尔算法）

    都是生成最小生成树,库鲁斯卡尔算法与普里姆算法的不同之处在于——库鲁斯卡尔算法的思想是以边为主,找权值最小的边生成最小生成树. 主要在于构建边集数组,然后不断寻找最小的边. 同样的题目:最小生成树 题 ...

  2. Number Sequence 分类： HDU 2015-06-19 20:54 10人阅读 评论(0) 收藏

    Number Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tot ...

  3. Linux内存模型

    http://blog.csdn.net/sunyubo458/article/details/6090946 了解linux的内存模型,或许不能让你大幅度提高编程能力,但是作为一个基本知识点应该熟悉 ...

  4. python学习笔记-day4笔记 常用内置函数与装饰器

    1.常用的python函数 abs             求绝对值 all               判断迭代器中所有的数据是否为真或者可迭代数据为空,返回真,否则返回假 any          ...

  5. Linux下c++中的atoi、atol、atoll、atof函数调用实例

    本文中调用的四个函数如下: atoi函数:将字符串转化为int类型变量 atol函数:将字符串转化为long类型变量 atoll函数:将字符串转化为long long类型变量 atof函数:将字符串转 ...

  6. java提高篇---HashMap

    HashMap也是我们使用非常多的Collection,它是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做一个整体来处理,系统会根据 ...

  7. CSS——清除浮动

    <div id="main" class="clear"> <div id="left"> </div> ...

  8. Linux 多核下绑定硬件中断到不同 CPU（IRQ Affinity） 转

    硬件中断发生频繁,是件很消耗 CPU 资源的事情,在多核 CPU 条件下如果有办法把大量硬件中断分配给不同的 CPU (core) 处理显然能很好的平衡性能.现在的服务器上动不动就是多 CPU 多核. ...

  9. linux系统中如何查看日志 (常用命令2)

    cat tail -f 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关 ...

  10. 【Java】Java创建String时，什么情况放进String Pool？

    对Java创建String是否放入String pool作代码性的试验. 参考的优秀文章 JAVA面试题解惑系列(二)——到底创建了几个String对象? public String(String o ...