移动开发基础
注意
- 移动端浏览器我们主要对webkit进行兼容
- 我们现在开发的移动端主要针对手机端开发
- 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一
- 学会用谷歌浏览器模拟手机界面以及调试
1、视口
视口就是浏览器显示页面内容的屏幕区域
- 视口分为布局视口、视觉视口、理想视口
- 移动端布局想要的是理想视口就是手机屏幕有多宽,我们的布局视口就有多宽
- 想要理想视口,我们需要给我们额移动页面添加
<meta>
标签
标准的viewport参数设置
- 视口宽度和设备保持一致
- 视口默认缩放比例为0
- 不允许用户自行缩放
- 最大允许缩放比例为1.0
- 最小允许缩放比例为1.0
2、物理像素和物理像素比
- 物理像素点指的是屏幕显示的最小颗粒,是物理存在的,厂商在出厂就设置好的
- 开发过程中,1px不一定等于一个物理像素
- PC页面,1个px等于一个物理像素,但移动端不尽相同
- 一个px的能显示的物理像素点的个数称为物理像素比或者屏幕像素比
3、多倍图
- 对于一张50px*50px的图片,在手机上视网膜屏打开的时候,会按照物理像素比放大,从而造成图片模糊
- 在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题,
- 通常使用二倍图,因为iphone6\7\8的影响,现在还存在3倍图4倍图,具体看公司需求。
- 背景图也要使用多倍图
4、移动端开发选择
- 现在市场常见的移动端开发有单独制作移动端页面和响应式页面
- 现在主流选择是:单独制作移动端页面
5、常见问题解决方案
1、浏览器兼容问题
移动端浏览器基本都是以webkit内核为主,因此我们只需考虑webkit兼容问题,可以放心使用H5标签和css3样式。同事我们浏览器的私有前缀我们只需要考虑添加-webkit-即可
2、CSS初始化normalize.css
移动端css初始化推荐使用normalize.css。是一个可以定制的CSS文件,他让不同的浏览器在渲染网页元素的时候形式更加统一,是一种现代的,为HTML5准备的优质替代方案
优点
- 保护了有价值的默认值
- 修复了浏览器的bug,解决了浏览器不一致的默认样式
- 模块化,提供了易用性
- 有很详细的文档
3、CSS3盒子模型box-sizing
传统模式宽度计算:盒子宽=width+border+padding(外扩)
CSS3盒子宽度计算:盒子宽=width(内减)
如何选择?
- 移动端可以全部css3盒子模型
- PC端如果完全需要兼容,就用传统模式,如果不考虑兼容问题,则选择使用CSS3盒子模型。
4、特殊样式
/*
* css3盒子模型
*/
box-sizing:border-box;
-webkit-box-sizing:border-box;
/*禁止长按页面时弹出菜单*/
img,a{
-webkit-touch-callout:none
}
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;
/*点击高亮我们需要清除,设置为transparent完成透明*/
-webkit-tap-highlight-color:transparent;
5、移动端技术选型
单独制作移动端页面(主流)
- 流式布局(百分比布局)
- flex弹性布局(强烈推荐)
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端(其次)
- 媒体查询
- bootstrap