始于移动端网页布局

Blog---不如称为流水账.

在讲移动端网页布局之前，先了解一下移动端的分辨率.大部分内容参考自李炎恢老师的视频课程。

Chrome移动调试工具显示的移动端分辨率介于320-640之间，但是iphone6p号称1080*1920的分辨率，并且设计者在实际工作中发现实际分辨率为1242*2208，但它的逻辑分辨率为414*736，并没有超过640。其他的也都类似，在设计布局时，会自动进行缩放。所以仍旧可以按照不大于640px来设计。

移动端主要分为两类:全屏类:不管屏幕多大，一律全屏显示 http://m.tuniu.com/   http://xw.qq.com/

固屏类:只要不大于640px为全屏，大于640以后两边就出现了白条。  http://m.jd.com/  http://m.intl.taobao.com/

淘宝原网站(2015.7月)仍为固屏，搜索栏全屏,主题为640固屏,但2016年4月改为了全屏.

Tips:

CSS媒体查询:根据不同的屏幕宽度来适应不同css规则  

@media (min-width: 480px) and (max-width: 640px) {      //当媒体介于480-640之间时
#tour h2 {
font-size: .26rem;
}
#tour h3 {
font-size: .16rem;
}
}

@media (max-width: 480px) {                                        //当媒体小余480时
#tour h2 {
font-size: .18rem;
}
#tour h3 {
font-size: .14rem;
}
}

移动端head参数:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

           //   窗口设定            页面大小等于屏幕宽度   初始缩放比例为1    最小缩放比1            最大缩放比1          用户是否可以缩放，这里no 表示不可以      

关于viewport标签，可以参考另一篇文章http://imweb.io/topic/56b421c15c49f9d377ed8eef 与 http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

主体部分:

大小自适应缩放居中: (固屏类)

 {display:block;    //div等原本就是block的就不需要了，img等需要；

 max-width: 666rem;//   一定要使用max-width，这是一个相对宽度不是绝对宽度，当屏幕小余666时block会占据100%,

margin:0 auto;        //居中显示

}

清理浮动: 上面的内容浮动后相当于图层上移了，下面的内容会自动向上顶,下面元素的margin-top也会失效,background也会对上面浮动元素生效.

为了清理浮动可以在浮动元素后面加一个<div class="clearfix"></div>

.clearfix:after {
content: '.';
display: block;
clear: both;
height: 0;
visibility: hidden;
}

文字过长时自动裁剪显示...

p {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}