【学习笔记】web移动端网页开发笔记

移动端开发导读：

• 我国移动端浏览器都是基于webkit修改的，所以在照顾兼容性方面只需要考虑webkit内核即可
• 作为前端开发，不建议纠结于dp，pt，ppi等单位
• 移动端调试方法：
  1.谷歌浏览器模拟手机调试
  2.搭建本地web服务器，手机和服务器在同一局域网内可通过手机访问服务器
  3.搭建外网服务器，通过ip或域名访问

视口：

• 视口viewport就是浏览器显示页面内容的屏幕区域，视口可分为布局视口，视觉视口和理想视口；想要理想视口，需要添加meta视口标签：
  <meta name="viewport" content="width=device-width">

属性	解释说明
width	设置viewport宽度，可以设置divice-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes/no或1/0

标准的viewport设置：

1. 视口宽度和设备保持一致
2. 视口的默认缩放比例1.0
3. 不允许用户自行缩放
4. 最大允许的缩放比例1.0，最小也是1.0
   语法：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

物理像素比：

比如iPhone6的分辨率为1334*750，该手机的物理像素比为2.0，说明我们在开发的时候，一个宽667px，高375px的元素即可占满整个iPhone6的屏幕

设备	尺寸（英寸）	开发尺寸	物理像素比（dpr）
iphone3G	3.5	320*480	1.0
iphone4/4s	3.5	320*480	2.0
iphone5/5s/5c	4.0	320*568	2.0
HTC One M8	4.5	360*640	3.0
iphone6	4.7	375*667	2.0
Nexus4	4.7	384*640	2.0
Nexus 5x	5.2	411*731	2.6
iphone6 plus	5.5	414*736	3.0
Samsung Galaxy Note 4	5.7	480*853	3.0
Sony Xperia Z Ultra	6.4	540*960	2.0
Nexus 7	7.0	600*960	1.3
iPad Mini	7.9	768*1024	1.0

多倍图：

准备一张50px*50px的图片放到手机上，由于物理像素比的原因会呈现为一张100*100px的图片，所以会变模糊；但是，如果我们准备一张100*100的图片，然后通过css压缩成50*50的大小，再放到手机上，同样是呈现为100*100px，但清晰度更高，这就是多倍图。可以用cutterman切多倍图

二倍精灵图做法：

1. 在fireworks里把精灵图等比缩放为原来的一般
2. 测量坐标
3. 在css里把background-size设置为精灵图的一半

背景拉伸：

background-size:300px 200px；（先插入图片，后设置大小）

1. 写两个参数分别代表宽和高
2. 如果只写一个参数则代表宽度，同时高度会进行等比缩放；
3. 单位可以为%，但是是相对于父盒子的大小
4. 参数为cover，是将图片等比拉伸，知道图片完全覆盖盒子
5. 参数为contain，是将图片等比拉伸，直到宽或高完全占满一个

移动端开发选择：

移动端开发有两种模式：

1. 单独制作移动端界面（较多）
   单独制作的意思就是PC端和移动端的网页分开制作，各干各的，主要方式有：

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

2. 响应式页面（较少，制作麻烦）
   而响应式页面会通过实时判断浏览器的宽度来呈现不同的样式，包括媒体查询和bootstrap

特殊图片格式

• dpg格式：
  京东自助研发图片压缩技术，大大减少用户流量消耗
• webp格式：
  谷歌开发的加快图片加载速度的格式，体积为jpg的2/3

流式布局

流式布局（百分比布局）

• 流式布局就是百分比布局，也叫非固定像素布局，通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充，但最好加个最大宽度和最小宽度：
  max-width/max-height
min-width/min-height
• 因为每个盒子的宽度都要设置100%，所以直接给body宽100%并水平居中
  最小宽度一般设置为320px，最大640px

flex布局

flex布局导读

1. 如果是PC端布局，还是用传统布局
2. 如果是移动端或者不考虑兼容性的pc端布局，就用flex布局

• flex是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性，任何元素都可以指定为flex布局。当为父盒子指定flex布局后，子元素的float，clear和vertical属性都失效
• 添加了flex的父容器叫做flex容器，它的所有子元素叫做flex项目，子容器可以横向排列也可以纵向排列
• 行内元素添加了flex可以直接设置宽高

flex布局的原理就是通过给父盒子添加flex属性来控制子盒子的位置和排列方式

常见父项属性（为父元素设置）

• flex-direction：设置主轴方向
  默认x轴为主轴，y为侧轴
  默认属性为row，按行排列，还有column按列排列
• justify-content：设置主轴上的子元素排列方式

属性值	说明
flex-start	默认值，从头部开始。如果主轴是x轴则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间（重要）

• align-items:设置侧轴上的子元素排列方式（单行）
  属性：flex-start 从上到下/flex-end从下到上
  center垂直居中/stretch拉伸（前提子元素没有高度）
• align-content:设置侧轴上的子元素的排列方式（多行）
  只能用于子项出现换行的情况下（多行），单行下没有效果

属性值	说明
flex-start	默认值从侧轴的头部开始排列
flex-end	从侧轴的尾部开始排列
center	在侧轴中间显示
space-aroud	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两边，再平分剩余空间
stretch	设置子项元素高度平分元素高度

• flex-wrap：设置子元素是否换行
  flex会强行让子元素在一行显示，如果放不下，则减小子元素的大小，必须一行显示完。
  默认nowrap，可以设置为wrap就能换行了
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
  语法：flex-flow：row rap；

flex布局子项常见属性：

• flex属性定义子项目分配剩余空间，用flex来表示占多少份数
  语法：.item{flex：n；}默认n是0
• 不给宽度，直接写flex：1即可实现宽度等分效果，因为flex属性是根据子元素的剩余空间来分配，如果子元素没有设定宽度，那么剩余空间就是全部宽度，然后每个元素占一份
• 如果想让某个元素多占一份，就再给该元素添加个flex：2即可
• align-self控制自己在侧轴上的排列方式
  其他元素在测轴上是由上到下排列，可以单独给某个元素添加align-self：flex-end；属性让他自己从下往上排列
• order属性定义项目排列顺序
  默认每个元素的order都是0，可以给某个元素设置order值，越小越靠前，可以是负值
• 补充知识点：
  ① 让盒子占满屏幕，左右有个小边距的话，不能给盒子100%宽，让他继承父亲的就好
  ② 给父盒子加圆角是无法显示的，因为里面的子元素没有圆角还是会显示的矩形，所以还要给父元素加overflow：hidden

rem适配布局

rem单位介绍

rem（root em）是一个相对单位，类似于em，em是父元素字体的大小，而rem的基准是相对于html元素的字体大小

• 比如，根元素html设置font-size=12px；非根元素设置width：2rem；则换算成px就是24px
• 那么怎样使html里的字体大小随着浏览器的宽度改变而改变呢？
  这就用到了媒体查询（Media Query）

媒体查询导读

使用@media查询，可以针对不同的媒体类型和不同的屏幕尺寸定义不同的样式

• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，目前针对很多苹果手机、安卓手机，平板等设备都用得到媒体查询
• 语法规范：

@media mediatype and|not|only (media feature) {
CSS-Code;
}

注意：用@media开头，注意@符号

mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

关键字and not only

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
① and：可以将多个媒体特性连结到一起，相当于“且”的意思
② not：排除某个媒体类型，相当于“非”的意思，可以省略
③ only：指定某个特定的媒体类型，可以省略

media feature媒体特性

每种媒体都有不同的媒体特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，要加小括号包含使用

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

举例：

@media screen and (max-width:800px) {
    body {
        background-color: pink;
    }
}

这句话的意思是，如果你用的是电脑或手机，并且你浏览器的界面宽度小于等于800像素，就将body的背景色改为pink色。

• 媒体查询一般按照从小到大的顺序来
• screen和and不能省略
• 数字后面的单位也不能省略

媒体查询+rem实现元素动态大小变化

rem单位是跟着html走的，媒体查询可以根据不同设备不同宽度来修改html的样式，所以媒体查询+rem就可以实现不同设备宽度实现页面元素大小的动态变化

引入资源

可以通过媒体查询来调用不同的css文件，先准备好两个css文件，由屏幕的宽度来决定使用哪个css样式，参考三星官网。
只要是媒体查询，一律遵循从小到大的顺序排列，语法：

<link rel = "stylesheet" href = "style320.css" media = "screen and (min-width: 320px)">
<link rel = "stylesheet" href = "style320.css" media = "screen and (min-width: 640px)">

rem实际开发适配方案：

1. 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）
2. CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem单位的值

rem适配方案技术使用

• 方案1：就是我们上面学习的媒体查询+rem
• 方案2：flexible.js+rem（推荐）

rem适配方案1：媒体查询+rem

设计稿常见宽度

设备	常见宽度
iphone 45	640px
iphone 678	750px
Android	常见320px、360px、375px、384px、400px、414px、500px、720px，大部分4.7-5寸的安卓设备为720px

一般情况下，以一套或两套效果图适应大部分屏幕，现在基本以750为准

动态设置html标签font-size大小

1. 选一套标准尺寸 750为准
2. 将屏幕划分15份，用750除以15份，得到的就是html里文字的大小，也就是1rem的大小，并且不同的屏幕尺寸大小得到的1rem的值是不一样的
3. 通过媒体查询来动态实现不同屏幕宽度下得到的不同rem大小

rem的适配：

1. 新建common.less，设置好常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，除了首页，其他页面也需要该less文件
2. 我们关心的尺寸有320,360,375,384,400,414,424,480,540,720,750px就足够了
3. 划分的分数我们定为15等份，宏定义一下方便日后修改
4. pc端也能访问我们的移动端页面，但我们不可能再搞个大于1566像素，大于1920像素，所以我们给个默认值50px，写到文件顶部，如果是手机端访问就让下面的媒体查询层叠掉它

less样式的导入

1. 新建index.less，这里写首页的样式
2. 将刚设置好的common.less引入到index.less里面，语法：
   @import “common”;

这样index.less里就包括了所有common.less的样式了，所以只引入index.css就可以了，不用引入common.css，比较方便

给body添加限定样式：

为了限定版心的位置和最大宽度最小宽度，我们要提前给body添加一些样式，苏宁原版样式：

body {
min-width: 320px; //最小宽度320
width: 15rem;   //最大宽度用rem可以动态的设置最大宽度
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
} 

rem适配方案2：flexible.js+rem

我们不需要再根据不同的屏幕尺寸进行媒体查询来动态修改html的字体大小了，这个js文件直接帮我们实现了
它的原理是把当前设备划分为10等份，但是不同设备下比例还是一致的

电脑模式调试问题

• 有时候为了方便我们可能直接以电脑的大屏模式而不使用模拟移动端调试，但要注意电脑模式下如果界面到达一定高度时，侧边会出现滚动条；
• 我们HTML的font-size值是被浏览器的width值影响的，而该滚动条会影响width值，所以尽量在移动端下调试

技术选型

方案：单独制作移动页面
技术：flexible.js+rem
设计图：750px

VSCode px转换rem 插件cssrem

去插件商店下载cssrem
因为vscode默认html字体大小是16px，所以这个插件是按照16px来计算rem值的，我们要打开setting.json文件修改默认html文字大小为75px，这样1rem的值就是75px

层叠flexible.js的默认html字体大小

因为flexible.js是按照屏幕宽度来修改html的字体大小，如果屏幕是1000px，那么html的字体就是100px，但我们最大只要750px的宽度就好了，所以使用媒体查询将视口宽度大于750px的时候，html字体设置为75px。而且要加important提权，不然会反被flexible层叠掉

响应式开发

响应式开发原理

就是通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而实现适配不同设备的目的

响应式尺寸划分：

设备划分	尺寸区间
超小屏幕（手机）	< 768px
小屏设备（平板）	>= 768px ~ < 992px
中等屏幕（桌面显示器）	>= 992px ~ < 1200px
宽屏设备（大桌面显示器）	>= 1200px

• 超小屏幕：宽度设置为100% min-width：767px
• 小屏设备：宽度设置为750px min-width：768px
• 中等屏幕：宽度设置为970px min-width：992px
• 大屏幕：    宽度设置为1170px min-width：1200px

为什么宽度设置的要比设备尺寸小呢？：有个居中效果，较好看

响应式布局容器

• 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果
• 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
• 在响应式开发里，首先需要一个布局容器，我们给他类名.container

BootStrap简介：

Bootstrap是基于html，css和javascript的，它简介灵活，使得web开发更加便捷
中文官网：bootcss.com
官网：getbootstrap.com

什么是框架：

顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预置样式库。组件和插件，使用者要按照框架所规定的某种规范进行开发

使用bootstrap框架四部曲：

1. 创建文件夹结构，要新建一个bootstrap文件夹
2. 创建html骨架结构
3. 引入相关样式文件
4. 书写内容：
   要使用bootstrap预定义好的样式，直接用类名来调用就可以，同时也可以修改bootstrap原来的样式，不过要注意权重问题。

bootstrap已经给我们引入了normalize.css文件，所以我们使用bootstrap的时候不需要再引入.

学好bootstrap的关键就在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

bootstrap布局容器：

bootstrap已经预先为我们定义好了布局容器这个类，它包括两种：

1. container类：
   大屏宽度定为1170px 中屏970px 小屏750px 超小屏100%
2. container-fluid类
   流式布局，根据视口的宽度动态调整宽度百分比，适合单独做移动端开发

栅格系统简介：

bootstrap会将.container容器等分为12列（注意rem是将整个屏幕划分为10等份，不要混淆），可能左边的盒子占2列，中间的盒子占7列右边的盒子占3列，然后通过视口大小的变化，每一列的宽度也会进行变化，里面内容的大小也会随着变化

栅格选项参数：

栅格系统用于通过一系列的行.row和列.column的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

	超小屏幕（手机） < 768px	小屏设备（平板） >= 768px	中等屏幕（桌面显示器） >=992px	宽屏设备（大桌面显示器） >= 1200px
.container最大宽度	自动（100%）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12

我们通过屏幕大小的变化来改变盒子所占份数，就能实现响应式的效果。我们可以同时为一列指定多个设备的类名，以便划分不同份数，如class="col-md-4 col-sm-6"
只添加col-xs-3，不添加sm/lg等，代表永远分为3份

类前缀解释：

• xs - extra small
• sm - small
• md - medium
• lg - large

注意：

• 行.row必须放到.container布局容器里
• 我们实现列的平均划分需要给列添加类前缀，如col-xs-5说明占5份
• 尺寸小于992尺寸等价于最大宽度为991px
• 如果列小于12，则一行会占不满。如果大于12，则最后放不下的那一列会另起一行显示
• 每一列默认有左右15的padding

列嵌套：

1. 已经被分成12份的一行中的某一列，可以再作为父级划分为12份，在里面添加一个.row作父级，再添加col-xx类；
2. 添加一个.row作父级的好处：可以盖住.row的父元素的padding值并且和.row的父级一样高，但这个.row的儿子是保留padding的，就可以实现外边距的效果
3. 一行排列的盒子不能给margin值，因为它实现的原理是给每个盒子设定百分比的宽度并加浮动等css样式来实现的，给margin可能排不开，会把别的盒子挤下去

列偏移：

语法：col-xs/sm/md/lg-offset-n
一行是12份，后面的n是几就是让你的盒子向右偏移几份，本质上就是给该盒子添加左外边距

列排序：

语法：col-md-pull/push-n
pull是向左拉，push是向右推，n就是推拉的份数

响应式工具：

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

添加以下类：（可以添加多个）这种类名可以给任何元素添加
.hidden-xs/.visible-xs：仅在超小屏下隐藏/显示
.hidden-sm/.visible-sm：仅在小屏下隐藏/显示
.hidden-md/.visible-md：仅在中屏下隐藏/显示
.hidden-lg/.visible-lg：仅在大屏下隐藏/显示

更多工具/样式/结构等内容请参考bootcss.com

阿里百秀案例bootstrap开发思路：

• 中屏和大屏布局一致，因此我们列定义为col-md就可以了
• 屏幕缩放发现小屏幕和超小屏幕布局发生变化，我们要根据需求改变布局

因为网页美工给我们的设计稿是1280px的，而bootstrap默认宽1170px，所以我们要修改.container的最大宽度为1280px，用媒体查询，当视口大于等于1280时，.container值1280

bootstrap已经写好了清除浮动，类名加上clearfix即可

策略：我们先布局md以上的pc端布局，最后根据实际需求再修改小屏幕和超小屏幕的特殊布局样式

步骤记录：

1. 整个屏幕是一个大container，分左中右三列。先进行左列的开发，分为上下两个盒子，宽度用百分比，高度让图片通过宽度百分比的变化调整高度从而影响整列的高度
2. 中部盒子分上下两个，但下面的.publish需要再当做一个盒子分为12份，左边文字占9分，右边图片占3，用col-sm-9/3来表示，说明在小屏幕以上都是按左9右3来划分
3. 前面布局好了中等以上的结构，现在来根据小屏幕下显示出的问题一个个解决
4. 当我们的屏幕尺寸在超小屏幕下，会发现顶部的logo占太大了，所以通过hidden-xs让他在超小屏下隐藏，并添加一个span来代替它显示，并给该span添加visible-xs属性让这个span仅在超小屏出现
5. 在小屏和超小屏下，.nav应横着显示，所以我用媒体查询给他们添加了浮动，因为要再xs和sm屏中显示，也就是小于992px，用max-width：991px是极好的
6. 在超小屏下，article中的5张图片太挤了，所以要改变排列方式，并且下面的.publish的文字太多了，图片也不需要了，所以全部添加隐藏：hidden-xs

总结： 先做md和lg的pc端页面，然后慢慢缩小，看哪里不合适就隐藏或添加新元素来代替，并结合媒体查询改变某些样式