Web移动前端开发——基础

移动端的现状

• 大多数都是webkit的内核，虽然有很多游览器软件，但是大多数内核是一样的。

常见的手机尺寸

1. 注意我们其实并不太关心手机分辨率，我们写前端大多数用的多少像素单位
2. 移动端的调试工作，请在Chrome浏览器打开调试面板，切换模式就可以了。调试方法大多数都是大同小异而已

视口概念

一、基础的概念

1. 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口(layout vieport)[早期的移动端解决方案，会把网页压缩导致展示效果发生变化]、视觉视口[visual viewport,显示不全]和理想视口ideal viewport，其实就是一个屏幕区域，我们最常用的就是 理想视口

二、简单的概述。

为了使网站在移动端有最理想的浏览和阅读宽度而设定，需要手动添写meta视口标签通知浏览器操作，meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

三、meta视口标签，

最标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

• 代码

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

四、图片问题（多倍图片）

1. 物理像素，物理像素比

• 物理像素是指，真实存在的像素（既设备的分辨率）
• 物理像素比，我们开发的时候用的1px不一定是1px，如果是pc端那就是1px=1px，但是移动端就不一样了，有可能我们写开发的1px=2px物理像素，那么他们之间的比值2，就是物理像素比啦。举个例子，

iPhone 8的物理像素是750（分辨率750） 它的物理像素比为2 ，那么我们开发时写的 375px就可以占满整个屏幕了

• 所谓的视网膜技术retina，就是更多的把像素压缩在一个屏幕里面，让现实的效果更佳。

2. 多倍图是什么鬼？

1. 问题： 还是来举个例子，简单的来说一个50*50的开发图片，放在移动端的一个像素比是2的设备里面，就会放大图片。如果图片放大就会引起显示效果的变化，可能就会变得模糊了。
2. 解决： 倍图，比如我还是像原封不动的像素图片。还是50 * 50。解决方法就是对图片进行像素压缩，我们在50* 50的div里面放一个 100 *100像素的图片（相当于压缩了到移动端），这样，在移动端打开就是原来的50 *50的像素图片了。

总结一下，二倍图就是：我们开发准备的图片是实际要求图片的两倍，同样的道理 三倍图，四倍图也是一样的。

3.背景缩放

1. background-size：图片的宽度 图片的高度。
2. 属性值：像素，百分比，cover（完全覆盖带哦区域，有可能显示不全），contain（高度和宽度完全适应）都可以。
3. 背景2倍图怎么搞

    /* 1. 我们有一个 50 * 50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍， 100*100 */
        /* 2. 我们需要把这个图片缩放一半，也就是 50*50  background-size*/
        
        div {
             50px;
            height: 50px;
            border: 1px solid red;
            background: url(images/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }

3. 如何快速的倒出二倍图？才ps上安装一个插件cutterman就行

4.精灵图怎么搞？

1. 在fr软件里面，等比例缩放原来的一半
2. 测量坐标
3. 缩放原来的精灵图
4. 调整定位坐标 和缩放坐标
   代码实例

.sou {
    position: absolute;
    top: 8px;
    left: 50px;
     18px;
    height: 15px;
    background: url(../images/jd-sprites.png) no-repeat -81 0;
    background-size: 200px auto;
}

移动端的开发技术选型

单独制作移动端页面（主流）

1. 核心原理，单独制作

2. 写法；由于移动度大多数webkit内核，所以我们可以放心大胆的用h5c3 webkit内核对h5c3支持很好。

3. 初始化代码css --normalize.css

4. 新的盒子模型(c3), box-sizing，（为什么要用它？因为之前的传统盒模型需要计算比较麻烦）

c3盒子模型的宽度= css设置的width（不需要加border和padding）因为C3里面已经包括了。加上一个属性；box-sizing:border-box；就可以实现了。-padding 和border不撑开盒子

5. 移动端口的特殊样式说明：

/*清除链接背景高亮显示*/
* {
-webkit-tap-highlight-color:transparent;
}
/*ios设备*/
input {
-webkit-appearance:none;
}
/*禁止长按页面是弹出的菜单*/
img,a{
    -webkit-touch-callout:none;
}

响应式页面，兼容pc和移动端，

1. 核心原理，响应自动响应！
2. 比较麻烦。你需要写很多的兼容性样式

移动端开始布局方案

1. 注意哈，前面的单独页面，和响应式页面是说 技术选型方案 ，这里的是说布局方案
2. 来看我们的表格：

单独页面技术方案	响应式技术方案
流式布局 （百分比布局）	媒体查询
flex弹性盒子布局（强烈推荐）	bootstrap
less + rem +媒体查询布局
混合布局

3. 没有那个最好的，只有那个更合适、