html5移动端制作知识点总结

一、测试工具: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的时候不用重新计算。

 

posted @ 2016-10-12 23:55  2350305682  阅读(511)  评论(0编辑  收藏  举报