一.移动端基本知识
提示:h5 c3 在移动端上的兼容性非常好
1.进入开发者模式
2.点击左边图标转换移动端模式
3.alt+shift+鼠标拖动改变大小
4.可以添加尺寸,自定义尺寸
二.视口属性介绍
可视窗口的大小:最好=手机屏幕大小
1.user-scalable:0;不允许用户缩放
三.像素
1.物理像素:手机出场自带的,不能修改,就是水平和垂直方向的物理像素点的多少
比如iphone3的分辨率是320480 屏幕上水平方向有320个物理像素点
1px(css像素,开发像素,逻辑像素)=1个物理像素
比如iphone4的分辨率是640960 屏幕上水平方向有640个物理像素点
1px(css像素,开发像素,逻辑像素)=2个物理像素点
1英寸上物理像素点的多少就是像素密度ppi
2.逻辑像素:css像素,设备独立像素) 1px
pc端 1px (css像素,逻辑像素)=1个物理像素
移动端 1px(css像素,逻辑像素,开发像素)=2(多个)物理像素
倍率:物理像素/开发像素(逻辑像素)
**总结:**要一个1px对应一个物理像素点,看起来效果才Ok
四.移动布局注意点
需要给最大和最小宽度.
注意:照片默认会有底部间隙,给img默认vertical-align:top.
1.流式布局 百分比布局
1.百分比宽高,高度设置px,或者被子元素撑开
2.水平方向禁止生成滚动条
3.css3盒模型,box-sizing:border-box,不会被padding border撑大盒子
4.两边的盒子,用自觉父相,定位到父元素的两边
五.移动端页面案例
1.先引入各种链接
2.搭建整个的框架
注意:清除浮动一个要给浮动元素的亲爹!!!
<div class="container">
<!-- 头部 -->
<div class="top_bar"></div>
<!-- 滚动栏 -->
<div class="slide_list"></div>
<!-- 导航 -->
<div class="nav"></div>
<!-- 快报 -->
<div class="newsflash"></div>
<!-- 新用户 -->
<div class="new_user"></div>
<!-- 东家小院 -->
<div class="produvt"></div>
<!-- 底部导航 -->
<div class="bot_nav"></div>
</div>
快报这个地方:全部用行内元素,方便在一行内显示,但是给不了宽,有的要给display:inline-block
1.先整体控制,给padding上下左右
2.i通过display转换 加精灵图 注意缩放2倍
3.然后文字这个 要注意给30%宽度,然后文字三步骤,强制一行显示,隐藏显示,文字加省略号.
4.最后a那里加一个左边框,如果那条线高了,可以给一个小的行高
<!-- 快报 -->
<div class="newsflash">
<i></i>
<em>热门</em>
<span>全新折叠屏手机上市,价格太高</span>
<a href="#" class="more">更多</a>
</div>
头部尾部定位:1.先要给版心一个max-width:750px;margin:0 auto;
2.头部如果给left就是和浏览器一样宽(JD做法) 给max-width就是和布局一样宽,不给left (携程做法)
3尾部一定要给bottom,不然会不见,如果给left就是和浏览器一样宽(JD做法) 给max-width就是和布局一样宽,不给left (携程做法)
4.最后img如果太大,可以给图片具体值得一半px
六.精灵图2倍图的处理
1.测量的尺寸除以2,盒子大小设置称为测量尺寸的一半
2.测量的坐标值,设置成背景定位的值,除以2
3.精灵图除以2
