移动开发第一天

移动开发第一天

移动基础

移动端调试方法

• Chrome DevTools（谷歌浏览器）的模拟手机调试
• 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
• 使用外网服务器，直接IP或域名访问

视口

​ 视口是浏览器的显示屏幕区域，分为布局视口，视觉视口和理想视口

布局视口：显示整个网页布局，通常通过缩放来实现移动端的显示

视觉视口：显示网站的某个区域，一般需要手动滑动网页

理想视口 ideal viewport

​ 理想视口就是屏幕有多宽，布局就有多宽，需要手动添加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 （1或0）

最标准的viewport设置

• 视口宽度和设备保持一致 width=device-width
• 视口的默认缩放比例1.0 initial-scale=1.0
• 不允许用户自行缩放 user-scalable=no
• 最大允许的缩放比例1.0 maximum-scale=1.0
• 最小允许的缩放比例1.0 minimum-scale=1.0

二倍图

物理像素和物理像素比

​ 一个px的能显示的物理像素点的个数，称为物理像素比。

​ pc端页面，1px=1个物理像素，但是在移动端不尽相同

​ 物理像素 ，就是我们通常说的分辨率

视网膜屏（Retina）是一个显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

问题描述：一张同样尺寸大小的图片，在PC端1px是用一个物理像素点来显示，而在移动端中1px可能是用4个或者更多的物理像素点来显示，所以在PC端中显示没问题，但是放到物理像素比高的移动设备中就会造成图片模糊

• 解决方法：准备比原定尺寸大2倍或多倍的图片（这就叫二倍图或多倍图），然后用样式手动把这个图片缩小至原定尺寸，这样在移动端就不会模糊了
• 补充说明：img标签直接用width和height控制，而背景图片用background-size控制

背景缩放 background-size

background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;

单位： 长度|百分比|cover|contain;

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

移动端主流方案

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

也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站

2.响应式页面兼容移动端（其次）

响应式网站：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配

移动端技术解决方案

1.移动端浏览器兼容问题

移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。

我们可以放心使用 H5 标签和 CSS3 样式。

同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

2.移动端公共样式

移动端 CSS 初始化推荐使用 normalize.css/

Normalize.css：保护了有价值的默认值

Normalize.css：修复了浏览器的bug

Normalize.css：是模块化的

Normalize.css：拥有详细的文档

CSS3盒子模型

css3盒子模型：盒子宽带=css中设置的宽度（width）里面包含了边框（border）和内边距（padding） 于传统的盒子模型不同 如果pc端不考虑兼容性可以使用css3盒子，css3盒子中边框和内边距不会撑大盒子

/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

移动端的特殊样式

 /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }

移动端的常见布局

移动端单独制作

• 流式布局（百分比布局）
• flex 弹性布局（强烈推荐）
• less+rem+媒体查询布局
• 混合布局

响应式

• 媒体查询
• bootstarp

流式布局：

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

流式布局方式是移动web开发使用的比较常见的布局方式。

二倍精灵图做法

精灵图就是将多个图片放到一张图片上

二倍精灵图使用步骤：

• 在ps中把精灵图等比缩放至原来的一半

• 根据大小测量坐标

• 代码里background-size等比缩放一半

  其他倍数精灵图同上

  新图片格式

dpg：京东自主研发的图片压缩技术，可节省近50%流量

webp：谷歌开发的一种加快图片加载速度的图片格式

常用的body的初始化设置

body {
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-heihgt: 1.5;
    background-color: #fff;
    color: #666;
}

一般移动端开发的准备步骤

技术选型：

​ 单独制作

​ 流式布局

搭建项目相关文件夹结构：

• /css
• /images
• /upload
• /index.html

设置视口标签以及引入初始化样式文件

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">