移动端开发基础
1.移动端浏览器主要是对webkit内核进行兼容
2.开发的移动端主要是针对于手机端开发
3.移动端开发碎片化很严重，分辨率和屏幕尺寸大小不一
4.学会谷歌浏览器模拟手机界面进行调试
视口
布局视口
- 一般浏览器都设置了一个布局视口，解决PC端网页在手机上显示的问题
-
IOS，Android基本设置为980px，PC上的网页大多数都能在手机上呈现，元素很小，需要手动缩放
用户体验不是很好
视觉视口
- 用户正在看到的网站的区域，网站的区域
-
通过缩放去操作视觉视口，不影响布局视口，布局视口还是保持原来的宽度
理想视口
- 使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口，对于设备来说，是最理想的视口尺寸
- 手动加入<meta>视口标签通知浏览器操作
- <meta>视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致（设备多宽，布局视口多宽）
<meta>视口标签
<meta name="viewport"
content="width=device-width,
user-scalable=no,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0">
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes或no（0或者1） |
device-width指的是设备的宽度，自动读取
设置maximum和minimum都是1.0的意思就是不让进行缩放
总结
- 视口就是浏览器显示页面内容的屏幕区域
- 视口分为布局视口，视觉视口和理想视口
- 移动端布局想要的是理想视口——手机屏幕有多宽，布局视口就有多宽
- 想要理想视口，就要给移动端页面添加<meta>视口标签
二倍图
物理像素&物理像素比
- 物理像素点指的是屏幕显示的最小颗粒，物理真实存在的。厂商出厂时设置好了的，后期不会改变，比如iPhone6\7\8是750*1334
- 开发的时候1px不一定是等于1个物理像素的
- PC端页面，1个px是一个物理像素，在移动端不一定
-
1个px能显示的物理像素点的个数，称为物理像素比
比如：
iPhone6,7,8这些型号，占满屏幕是375px，物理像素点是750，意思就是物理像素比等于1:2
- PC端和早期的手机屏幕/普通屏幕：1CSS像素=1物理像素
- Retina（视网膜屏幕）显示技术，可以将更多的物理像素点压缩到一块屏幕里
-
从而达到更高的分辨率，提高屏幕显示的细腻程度
左边为视网膜屏幕，右边为普通屏幕
差别
多倍图
- 一张50*50的图片，在retina屏的手机上打开，就会按照物理像素比放大，就会造成模糊
- 在标准的viewport中，使用倍图提高图片质量，解决高清设备上的图片显示问题
多倍图例子：
- 问题：如果一个 50 * 50 px的图片放到手机屏幕中，占有的物理像素点是 100 * 100 个，会造成图片模糊
-
解决方法：使用一个本身就是100 * 100px的图片进行制作，替换原来的图片，设置图片尺寸为50*50px
很明显，第二个图片清晰度更高
- 到底需要多少倍的图片，看实际开发公司需求
- 背景图也需要使用高清图（多倍图）进行添加
.box {
width: 50px;
height: 50px;
border: 1px solid #000;
/* 背景图也需要使用高倍图进行添加 */
background: url(images/apple100.jpg) no-repeat;
background-size: 50px 50px;
}
总结
1.如果是插入图，直接更改宽高（width，height）
2.背景图（更改background-size）
启动图尺寸是用来进行切图的，开发尺寸是用来量尺寸的
- @3x 3倍图
- @2x 2倍图
- @1x 一倍图原图
移动端开发方案
主流方案
- 单独制作移动端页面（主流）
- 响应式页面兼容移动端（其次）
单独制作移动端页面
- 通常情况下，网址域名前面加上m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面
比如：m.taobao.com
响应式兼容PC移动端
- 响应式网站：PC和移动端共用一套网站，在不同宽度的屏幕下，样式会自动匹配。
比如：
缺点：制作麻烦，花费大量精力调整兼容性问题
移动端技术解决方案
浏览器
- 基本以webkit内核为主，基本就只考虑webkit兼容问题
- 放心使用H5和CSS3样式
- 浏览器私有前缀只需要考虑添加-webkit-就行
CSS初始化normalize.css
- 移动端CSS初始化推荐使用normalize.css。可定制的css文件，让不同的浏览器在渲染网页元素的时候形式更统一，一种现代化的，为H5准备的优秀的替代方案
优点
1.保护了有价值的默认值
2.修复了浏览器的BUG，解决了浏览器的不一致的默认样式
3.模块化的，易用性提高了
4.有详细的官方文档
CSS3盒子模型 box-sizing
- 传统模式盒子宽度计算：盒子的宽度=CSS中设置的width+border+padding
- CSS3盒子模型：盒子的宽度= CSS中设置的宽度width里面包含了border和padding，也就是说，CSS3的盒子模型，padding和border再也不会撑大盒子了。
（参考CSS3笔记内的box-sizing词条，怪异盒子模型和标准盒子模型）
怪异盒子模型
标准盒模型
如何选择？
- 移动端可以全部使用CSS3的盒子模型border-box
- PC端如果完全需要兼容，建议使用传统模式:content-box，如果不考虑兼容性，就选择CSS3盒子模型
特殊样式
- CSS3盒子模型
box-sizing:border-box;
-webkit-box-sizing:border-box;
- 点击高亮需要清除，设置为transparent完成透明
-webkit-tap-heightlight-color:transparent;
- 移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance:none;
- 禁用长按页面时的弹出菜单
img,a {
-webkit-touch-callout:none;
}
移动端技术选型
单独制作移动端页面（主流）
- 流式布局（百分比布局）
- flex 弹性布局（推荐）
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端（其次）
- 媒体查询
- bootstrap
网友评论