移动端开发基础
基础知识点
浏览器现状
-
PC端常见浏览器
360、谷歌、火狐、QQ、百度、搜狗
-
移动端常见浏览器
UC、百度手机浏览器、360安全浏览器
-
兼容移动端主流浏览器、处理webkit内核浏览器
手机屏幕现状
- 尺寸非常多，碎片化严重
- 自动识别分辨率
- 调试方法：谷歌浏览器的模拟手机调试
视口
浏览器显示页面内容的屏幕区域
布局视口（layout viewport）
将PC端尺寸的页面通过压缩显示在移动端窗口
视觉视口(visual viewport)
用户正在看到的网站的区域，通过缩放去操作视觉视口，但不会影响布局视口，仍保持原来的宽度
理想视口（ideal viewport）
最理想的浏览和阅读宽度而定的，需要手动添加视口标签通知浏览器操作,设备有多宽，我们的布局视口就有多宽
扫描二维码关注公众号，回复：
12210645 查看本文章
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
二倍图
物理像素点
屏幕显示的最小颗粒，是物理真实存在的，厂商出厂时就已经设置好了
- PC端页面，1个Px等于一个物理像素，但是移动端不是
物理像素比
一个PX能显示的物理像素点的个数，也称屏幕像素比
多倍图
- 在手机Retina屏中打开，在标准的viewport设置中，使用倍图来提高图片的质量，解决在高清设备中的模糊问题
- 采用大倍数的图片进行img的宽高设置后让其压缩，就可以让它高清了
- 背景图下执行效果，通过background-size来更改背景照片的尺寸
移动端开发选择
单独制作移动端页面（主流）
- 一般来说购物平台多使用的是单独来书写移动端页面
- 网址域名前+m可以打开移动端，通过判断设备来跳转到移动端页面
响应式页面兼容移动端（其次）
- 一般都是官网页面的移动端单独书写
- 通过判断屏幕宽度来改变样式，以适应不同的终端
- 制作麻烦，需要调整兼容
移动端常见问题
-
浏览器
- 基本webkit内核为主，只需要考虑webkit兼容问题
- 浏览器的私有前缀只需要考虑-webkit-即可
-
CSS的初始化normalize.css
- 可定制的css文件，不同浏览器在渲染形式更加统一
- 是模块化的，提高了易用性
- 修复了bug，解决了浏览器的不一致默认样式
-
CSS3的盒子模型box-sizing：border-box
- 传统的盒子模型的宽度=width+border+padding
- CSS3中的盒子宽度，width中的内容已经包含了border和padding，不会撑大盒子
- 在不考虑兼容问题的时候就可以纯使用CSS3
移动端技术选型
单独
- 流式布局（百分比布局）
- flex弹性布局
- less+rem+媒体查询布局
- 混合布局
响应式
- 媒体查询
)]
移动端技术选型
单独
- 流式布局（百分比布局）
- flex弹性布局
- less+rem+媒体查询布局
- 混合布局
响应式
- 媒体查询
- bootstrap