移动Web开发

常见移动端屏幕尺寸

移动端调试方法

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

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。对于设备来讲，理想视口是最理想的视口尺寸。

meta视口标签

标准的viewport设置

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

什么是物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同。一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

二倍精灵图做法

为什么要使用二倍图
使用倍图来提高图片质量，解决在高清设备中的模糊问题。

正确做法

1. 将图片大小缩放一半
2. 测量图片位置
3. background-size写图片原来宽度的一半

移动端 CSS 公共样式

• 移动端 CSS 初始化推荐使用 normalize.css
• Normalize.css：保护了有价值的默认值
• Normalize.css：修复了浏览器的bug
• Normalize.css：是模块化的
• Normalize.css：拥有详细的文档

移动端特殊样式

 /*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布局
• css+rem+媒体查询布局
• 响应式布局

流式布局

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

flex布局

flex布局的好处
操作方便，布局极其简单。但PC端浏览器支持情况比较差，IE11或更低版本不支持flex或仅支持部分。

flex布局原理
flex 是 flexible Box 的缩写，意为"弹性布局"，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

flex布局常用属性

flex-direction：设置主轴的方向
+ justify-content：设置主轴上的子元素排列方式
+ flex-wrap：设置子元素是否换行  
+ align-content：设置侧轴上的子元素的排列方式（多行）
+ align-items：设置侧轴上的子元素排列方式（单行）
+ flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-direction

在 flex 布局中，是分为主轴和侧轴两个方向。
默认主轴是x轴，水平向右。
副轴是y轴，水平向下。
主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

justify-content 设置主轴上的子元素排列方式

flex-wrap设置是否换行

默认是不换行的
nowarp是不换行
wrap是换行

align-items 设置侧轴上的子元素排列方式（单行 ）

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项（单行）的时候使用
align-items：flex-start（从头部开始）
align-items：flex-end（从尾部开始）
align-items：center（居中显示）
align-items：stretch（拉伸）

align-content 设置侧轴上的子元素排列方式（多行 ）
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

align-content 和align-items区别

align-items适用于单行情况下，只有上对齐，下对齐，拉伸，水平对齐等效果。
align-content适用于多行情况，上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
注意：在单行的情况下，使用align-conten无效。常用align-items。

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性（简写）

 /*运用flex布局，同时换行*/
flex-flow：flex warp

flex 属性
定义子项目分配剩余空间，用flex来表示占多少份数。

flex：<number>默认值为0

align-selfs
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

 /*align-selfs*/
    align-self：flex-start；
    /上对齐/
     align-self：flex-end；
    /下对齐/
    align-self：center；
    /*居中对齐*/

order 属性定义项目的排列顺序

**数值越小，排列越靠前，默认为0。**
order：<number>

常见的flex布局思路

rem布局（相对长度单位）

rem布局的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
大小是相对于根标签的字体大小，也就是html

做移动端屏幕适配

解决方法：

• 使用vw
• 使用rem+flexible.js

适配步骤：

1. 下载flexible.js 并引入到html当中（根据屏幕的大小，动态的设置屏幕元素的大小）
2. 查看设计稿屏幕的宽度 10rem=屏幕宽度。

rem屏幕适配公式：

设备屏幕宽度/设计稿屏幕宽度 = 手机div宽度 / 设计稿屏幕宽度（只有手机div宽度是未知的）
@fontsize = （设备屏幕宽度 / 设计稿屏幕大小）* 设计稿屏幕宽度

less
是css预处理器，除了less 还有ssas、stylus。作用是提升代码开发效率

响应式布局

一套代码，同时适配pc和移动端。
主要运用媒体查询

媒体查询
css 语法 可以根据屏幕的特性(宽度) 加载对应的css代码