移动web开发基础
时间：2023-06-26 22:57:01 | 来源：网站运营
时间：2023-06-26 22:57:01 来源：网站运营
移动web开发基础：
移动端常见的浏览器
UC、QQ、欧鹏、百度、360、谷歌、搜狗、猎豹、其他杂牌浏览器
国内的UC、QQ、百度等手机浏览器都是根据Webkit修改过来的内核，国内每月自主研发的内核。
总结：兼容移动端主流浏览器，处理webkit内核浏览器即可
手机屏幕现状
移动端设备尺寸非常多，碎片化严重。
安卓设备有多种分辨率。
开发者无需关注分辨率，常使用的尺寸单位是px。
移动端调试方法
谷歌浏览器的模拟手机调试
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接IP或者域名访问
视口viewport
视口是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口、理想视口。
布局视口layout viewport
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
IOS,Android都会将视口分辨率设置为980px，所有PC上的网页大多都能在手机上呈现。
但是元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口visual viewport
用户正在看到的网站的区域。
可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
理想视口ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定 理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，设备有多宽，我们布局视口就有多宽
meta视口标签
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimun-scale=1.0">| 属性 | 解释说明 |
|---|
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes/no（1/0） |
标准的视口参数设置
1.视口宽度和设备保持一致
2.视口的默认缩放比1.0
3.不允许用户进行缩放
4.最大允许缩放比例1.0
5.最小允许缩放比例1.0
二倍图
物理像素/物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。是厂商在出场时就设置好了。
PC端页面，1px等于1个物理像素的，但是移动端不一定。
物理像素比：一个px的能显示的物理像素点的个数
PC端和早期的手机屏幕：1px=1物理像素
Retina（视网膜屏幕）一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而
达到更高的分辨率，并提高屏幕显示的细腻程度。
多倍图
一张图片在手机屏幕中打开，物理像素比会放大倍数，会造成图片模糊
在标准的视口设置中，使用多倍图来提高图片质量，解决在高清设备中的模糊问题
通常使用二倍图，还存在3、4倍图的情况。看实际开发公司需求。
背景图片注意缩放问题。背景图更改background-size属性来调整缩放
移动端开发选择
移动端主流开发方案
1.单独制作移动端页面（主流）
2.响应式页面兼容移动端（其次）
1.单独制作移动端页面
通常情况下，网址域名前面加m（mobile）可以打开移动端。通过判断设备，如果是移动设备打开，则跳转到移动端页面。
2.响应式页面兼容PC移动端
响应式网站：PC和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。
缺点：制作麻烦，需要花很大精力去调兼容性问题
移动端常见问题解决方案
浏览器
移动端浏览器基本以webkit内核为主，因此就考虑webkit的兼容问题。
可以放心使用H5和css3样式。
css初始化normalize.css
移动端css初始化使用normalize.css。一种可以定制的css文件，让不同的浏览器在渲染网页元素的时候形式更统一，
一种现代的、为HTML5准备的优质替代方案。
优点：
1.保护了有价值的默认值
2.修复了浏览器的bug，解决了浏览器不一致的默认样式
3.是模块化的，提高了易用性
4.拥有详细的文档。
css3盒子模型box-sizing
传统模式宽度计算：盒子的宽度=css中设置的width+border+padding
css3盒子模型：盒子的宽度=css中设置的width（width里包含了border和padding）
css3盒子模型，padding和border不会撑大盒子。
1.移动端全部使用css3盒模型
2.PC端如果完全需要兼容，用传统模式
不考虑兼容性，就选择css3盒子模型
特殊样式
1.css3盒子模型
box-sizing:border-box;-webkit-box-sizing:border-box;2.点击高亮需要设置清除；设置为transparent完成透明
-webkit-tap-highlight-color:transparent;3.在移动端浏览器的外观在iOS上加上一个属性才能给按钮和输入框自定义样式
-webkit-appearance:none;4.禁用长按页面时的弹出菜单
img,a{ -webkit-touch-callout:none;}移动端技术选型
1.单独制作移动页面（主流）
1.流式布局（百分比布局）
2.flex弹性布局（推荐）
3.less+rem+媒体查询布局
4.混合布局
2.响应式页面兼容移动端
1.媒体查询
2.bootstrap
1.流式布局
流式布局就是百分比布局，非固定像素布局
通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，
内容向两侧填充
流式布局方式是移动web开发使用的比较常见的布局方式
注意：制作过程中需要定义页面的最大和最小支持宽度
1.max-width最大宽度 2.min-width最小宽度
二倍精灵图做法
1.在firework里面把精灵图等比例缩放为原来的一半
2.根据新的大小 测量坐标
3.代码中background-size也要书写：精灵图原来宽度的一半
图片格式
DPG图片压缩技术
京东自主研发推出DPG图片压缩技术，可直接节省用户50%的浏览流量，极大的提升了用户的网页打开速度。
能够兼容jpeg，实现全平台、全部浏览器的兼容支持，压缩后的图片和webp的清晰度对比没有差距。
webp图片格式
谷歌开发的一种加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，能节省大量的服务器宽带
资源和数据空间。
flex布局
传统布局
1.兼容性好
2.布局繁琐
3.局限性，不能在移动端很好的布局
flex布局
1.操作方便，布局简单，移动端应用广泛
2.PC端浏览器支持情况较差
3.IE11不支持
注意：
1.PC端页面布局，用传统布局
2.移动端或者不考虑兼容性问题的PC端页面布局，用flex弹性布局
flex布局原理
flex弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
为父盒子设置flex布局以后，子元素float、clear、vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性布局=flex布局
采用flex布局的元素，为flex容器。它的所有子元素自动成为容器成员，称为flex项目
总结：flex布局就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
flex布局常见属性
父项常见属性
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式（多行）
align-items:设置侧轴上的子元素的排列方式（单行）
flex-flow:复合属性，等于同时设置了flex-direction、flex-wrap
flex-direction:设置主轴的方向
主轴侧轴
在flex布局中，是分为主轴和侧轴两个方向。主轴（x轴、行） 侧轴（y轴、列）
默认主轴方向x轴方向，水平向右
默认侧轴方向y轴方向，垂直向下
flex-direction属性决定主轴的方向（项目的排列方向）
注意：主轴侧轴是会发生变化的，看flex-direction设置谁为主轴，剩下的就是侧轴。
子元素是跟着主轴来排列的。
| 属性值 | 说明 |
|---|
| row | 默认值，从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
justify-content:主轴上的子元素排列方式
定义了项目在主轴上的对齐方式
注意:使用属性之前要确定好主轴是哪个
| 属性值 | 说明 |
|---|
| flex-start | 默认值，从头开始 （如果主轴是x轴，从左到右） |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x轴侧 水平居中） |
| space-around | 平分剩余的空间 |
| space-between | 在两边贴边 再平分剩余空间（重要） |
flex-wrap：设置子元素是否换行
默认情况下，项目都排着一条线（轴线）上
flex-wrap属性定义，flex布局中默认是不换行的
align-items:设置侧轴上的子元素的排列方式（单行）
属性控制子项在侧轴（默认是y轴）上排列方式
在子项为单项（单行）的时候使用
| 属性值 | 说明 |
|---|
| flex-start | 默认值，从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中（垂直居中） |
| stretch | 拉伸 |
align-content:侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下没有效果。
| 属性值 | 说明 |
|---|
| flex-start | 在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
align-content、align-items区别
align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content适用于换行（多行）的情况下（单行情况无效），可以设置上对齐、下对齐
居中、拉伸以及平均分配剩余空间等属性值。
总结
1.单行用align-items
2.多行用align-content
flex-flow:复合属性
flex-direction、flex-wrap属性的复合属性
子项常见属性
flex子项目占的份数
align-self控制子项自己在侧轴的排序方式
order属性定义子项的排序方式（前后顺序）
flex属性
flex属性定义子项目分配父盒子的剩余空间，用flex来表示占多少份数
属性值为数字，数字为1，表示占总份数的1份。默认值是0。
align-self控制子项自己在侧轴的排序方式
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值auto，表示继承父元素align-items属性，如果没有父元素，等同于stretch
order属性定义子项的排序方式
数值越小，排列越靠前，默认为0。调整子项的加载顺序
注意：和z-index不一样。
rem布局
rem单位
rem是一个相对单位。rem基准是相对于html元素的字体大小。
列如：根元素（html）设置font-size=12px;非根元素设置width:2rem；转换成px表示就是24px。
优势：
父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的来控制整个
页面的元素大小比例
媒体查询（Media Query）
css3新语法
1.适用@media查询，可以针对不同的媒体类型定义不同的样式
2.@media可以针对不同的屏幕尺寸设置不同的样式
3.重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
4.目前针对很多苹果手机、Android手机，平板等设备都用到多媒体查询
语法规范
1.@media开头
2.mediatype 媒体类型
3.关键字 and not only
4.media feature 媒体特性 必须有小括号包含
@media mediatype and|not|only (media feature) { CSS-Code;}mediatype 媒体类型
媒体类型：将不同的终端设备划分成不同的类型
| 值 | 说明 |
|---|
| all | 用于所有设备 |
| print | 用于打印机和打印预览 |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
1.and: 可以将多个媒体特性连接到一起。
2.not：排除某个媒体类型，可以省略
3.or：可以测试多个媒体擦好像的条件，只要有一个条件成立，就执行
4.only：指定某个特定的媒体类型，可以省略
媒体特性
每种媒体特性都各自具有不同的特性，根据不同的媒体类型的媒体特性设置不同的展示风格。
注意要加小括号进行包含
| 值 | 说明 |
|---|
| width | 页面可见区域的宽度 |
| min-width | 页面最小可见区域宽度 |
| max-width | 页面最大可见区域宽度 |
媒体查询代码从小到大写
媒体查询+rem实现元素动态大小变化
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化
引入资源方法
当样式比较繁多的时候，可以针对不同的媒体适用不同stylesheets(样式表)
直接在link中判断设备的尺寸，引入不同的css文件
<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="mystylesheet.css">css弊端
1.css是一种非程序式语言，没有变量、函数、作用域等
2.css需要书写大量看似没有逻辑的代码，css冗余度比较高
3.不方便维护及扩展，不利于复用
4.css没有很好的计算能力
5.非前端开发工程师，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目
less
less是一门css扩展语言，css预处理器
做为css的一种形式扩展，并没有减少css的功能，在现有的css语法上，为css加入程序式语言的特性
在css语法的基础上，引入了变量、Mixin（混入），运算以及函数等，大大简化了css的编写，并且
降低了css的维护成本，less可以用更少的代码做更多的事情
less是一门css预处理语言，扩展了css的动态特性。
less使用
新建一个后缀名为.less文件，在这个.less文件里书写less语句
1.less变量
2.less编译
3.less嵌套
4.less运算
less变量
变量是指没有固定的值，可以动态改变的。因为css中的一些颜色和数值等经常使用
@变量名：值；
变量命名规范
1.必须有@为前缀
2.不能包含特殊字符
3.不能以数字开头
4.区分大小写
变量使用规范
直接使用
body { color:@color;}a:hover{ @color;}less编译
less包含一套自定义的语法和一个解释器，根据这些语法定义自己的样式规则，这些
规则最终会通过解析器，编译生成对应的css文件
把我们需要的.less文件，编译生成为.css文件，然后html页面才能使用。
推荐方法（node.js）：在当前文件夹，使用cmd命令“lessc style.less>style.css”
less嵌套
内部选择器的前面没有&符号，那们它被解析为父元素选择器的后代
如果有&符号，就被解释为父元素自身或父元素的伪类
less运算
任何数字、颜色或者变量都可以参与运算。less提供了+、-、*、/算术运算。
注意：
1.参与运算的两个数字，可以一个有单位，一个没有单位，最终单位就是唯一的那个单位
2.参与运算的两个数字，两个都有单位，最终单位取第一个数字的单位
3.less运算符左右必须加空格
less 语法更新，变量相除时，需添加小括号
width: (200rem / 50px);height: (300rem / 50px);rem适配原理
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
使用媒体查询根据不同设备按比例设置html的字体大小，任何页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会
发生变化，然后达到等比例缩放的配置
rem实际开发适配方案
1.按照设计图和设备宽度的比例，动态计算并设置html跟标签的font-size大小(媒体查询)；
2.CSS中，设计图元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；
rem适配方案技术使用
1.less、媒体查询、rem
2.flexible.js、rem（推荐）
适配方案1：rem+媒体查询+less
1.设计稿常见尺寸宽度
一般情况下，以一两套效果图适应大部分的屏幕，放弃极端屏/对其优雅降级，牺牲一些效果。
苹果目前基本以750px为准
安卓目前以1080px设计
动态设置html标签font-size大小
1.假设设计稿是750px
2.假设把屏幕分为15等份（可以是20/10）
3.每一份作为html字体大小，这里就是50px
4.那们在320px设备的时候，字体大小就是320/15=21.33px
5.用页面元素的大小除以不同的html字体大小会发现它们的比例还是相同的
列如：以一个750为标准的设计稿
1.一个100*100像素的页面元素在750屏幕下，就是100/50转换为2rem✖2rem比例是1：1
2.320屏幕下，html字体大小为21.33，2rem=42.66px，此时宽高都是42.66.宽高比例还是1：1
3.可以实现不同屏幕下页面元素盒子等比例缩放的效果
元素大小取值方法
1.最后的公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
2.屏幕宽度/划分份数就是html font-size大小
3.页面元素的rem值=页面元素值（px）/html font-size字体大小
flexible.js简洁高效的rem适配方案
手机淘宝团队出的简洁高效移动端适配库
不需要在写不同屏幕的媒体查询，里面js做了处理
只需要确定好我们当前设备的html文字大小即可
响应式页面兼容移动端
原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而设备不同设备的目的。
| 设备划分 | 尺寸区间 |
|---|
| 超小屏幕（手机） | <768px |
| 小屏设备（平板） | >=768px~<992px |
| 中等屏幕（桌面显示器） | >=992px~<1200px |
| 宽屏设备（大桌面显示器） | >=1200px |
响应式布局容器
1.响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果
2.在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而
实现不同屏幕下，看到不同的页面和样式变化。
响应式尺寸划分
1.超小屏幕（手机，小于768px）：设置宽度为100%
2.小屏幕（平板，大于等于768px）：设置宽度为750px
3.中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
4.大屏幕（大桌面显示器，大于等于1200px）：设置宽度为1170px
也可以根据实际情况自己定义划分
Bootstrap
目前受欢迎的前端框架。Bootstrap是基于HTML、CSS、JS的，简洁灵活，方便web开发
优点：
1.标准化的HTML+CSS编码规范
2.提供一套简洁、直观、强悍的组件
3.有自己的生态圈，不断更新迭代
4.让开发更简单，提高了开发效率
Bootstrap版本
2.x.x:停止维护，兼容性好，代码不简洁，功能不够完善
3.xx：目前使用最多，稳定，但是放弃了IE6-IE7。对IE8支持但是界面效果不好，偏向用于开发响应式布局
移动设备优先的web项目
4.xx：最新版，目前还没有流行
Bootstrap使用
1.创建文件夹结构
2.创建html骨架结构
3.引入相关样式文件
4.书写内容
直接拿Bootstrap预先定义好的样式来使用
修改Bootstrap原来的样式，注意权重问题
关键在于知道它定义了哪些样式，以及这些样式能实现什么效果
布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，提供了两个作此用处的类
1.container类
响应式布局的容器固定宽度
大屏（>=1200px）宽度定为1170px
中屏（>=992px）宽度定为970px
小屏（>=768px）宽度定为750px
超小屏（100%）
2.container-fluid类
流式布局容器 100%宽度
占据全部视口的容器
适用于制作移动端页面开发
栅格系统（grid systems）
网格系统，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
Bootstrap提供了一套响应测试、移动设备优先的流式栅格系统，随着屏幕/视口尺寸的增加，
系统会自动分为最多12列。
栅格选项参数
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中。
| 超小屏幕（手机）<768px | 小屏设备（平板）>=768px | 中等屏幕（桌面显示器）>=992px | 宽屏设备（大桌面显示器）>=1200px |
|---|
| .container最大宽度 | 自动（100%） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | 12 | 12 | 12 |
1.按照不同屏幕划分为1-12等份
2.行（row）可以去除父容器作用15px的边距
3.列（column）大于12，多余的列所在的元素将被作为一个整体另起一行排列
4.每一列默认有左右15像素的padding
5.可以同时为一列指定多个设备的类名，以便划分不同份数，
列如：class=“col-md-4 col-sm-6”
列嵌套
栅格系统内置的栅格系统将内容再次嵌套。一个列内再分成若干份小列。可以通过添加一个新的.row元素
和一系列.col-sm-*元素到已经存在的.col-sm *元素内。
列偏移
使用.col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用* 选择器为当前元素增加了左侧的边距（margin）
列偏移
使用.col-md-push-* 往右推 .col-md-pull-* 往左拉两个类就可以很容易的改变列的顺序
响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示
或隐藏页面内容。
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的,visible-xs、visible-sm、visible-md、visible-lg是针对不同设备显示某个内容
下一章 JavaScript语法、操作符、数据类型、流程控制
在线咨询
