移动端布局笔记

1 移动端基础

移动端浏览器主要针对webkit兼容；
移动端调试方法：

• Chrome DevTools的模拟手机调试（上面工具栏可以增加其他型号设备的模拟界面）
• 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
• 使用外网服务器，直接IP或域名访问

1.1 视口(viewport)

浏览器显示页面内容的屏幕区域。

1.1.1 布局视口 layout viewprot

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。

1.1.2 视觉视口 visual viewport

是用户正看到的网站的区域
可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

1.1.3 理想视口 ideal viewport

需要手动添加meta视口标签通知浏览器操作；meta视口标签的主要目的是让设备有多宽，布局的视口就有多宽

1.1.4 meta视口标签

标准的viewport设置：
视口宽度和设备一致；
视口默认缩放比例1.0；
最大允许的缩放比例1.0；
最小允许的缩放比例1.0；
不允许用户自行缩放（1/0或yes/no)

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

initial-scale：初始缩放比，大于0的数字

1.2 二倍图

物理像素和物理像素比：
物理像素点指的是屏幕显示的最小颗粒，厂商出厂时就设置好了；物理像素就是常说的分辨率（iphone8的物理像素是750，在iphone8里面1px开发像素=2个物理像素，375px就占满了750分辨率；
开发时的1px不是一定等于1个物理像素的；
PC端1个px等于1个物理像素，移动端不一定；
一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比；
Retina（视网膜屏幕）是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，提高屏幕显示的细腻程度；所以出现了不能一一对应的情况

---

• 没看懂

多倍图：

• 对于一张50x50的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，会造成图片模糊；（弹幕：因为电脑的1像素在手机上被放大成2像素，图片亦被放大）
• 标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题；
• 背景图片，注意缩放问题。

我们需要的是一个50x50像素(css像素)的图片，直接放到iphone8里会放大两倍(100x100)会模糊；
策略：
放一个100x100的图片，手动把图片缩小为50x50(css像素)；这样即使这个50x50的图被放大到100x100也不会模糊，因为这个图片原本就是100x100；

我们准备的图片比我们实际需要的大小大2倍，这就是2倍图

在iphone8下面：
img {
            width: 50px;
            height: 50px;
        }

---

背景缩放（上一个不是背景图片是插入图片）
background-size: 图片的宽度 图片的高度;

1. 只写一个参数就是宽度 高度省略了 ，会等比例缩放
2. 单位：长度/百分比/cover/contain；（百分比是相对于父盒子来说）
3. cover：等比例拉伸，要完全覆盖div盒子，可能有部分背景图片显示不全（最短的边拉满才停止延伸）
4. contain：等比例拉伸 当宽度或者高度铺满div盒子就不再进行拉伸了 可能有部分空白区域（最长的边拉满就不再延伸了）

div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
                        background-size: contain;
        }

1.3 移动端调试/开发选择

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

通常情况下，网站域名前面加m(mobile)可以打开移动端，通过判断设备，跳转不同的页面（京东）

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

三星官网：www.samsung.com/cn/
通过判断屏幕宽度来改变样式，以适应不同的终端（PC端缩小页面就会变换不同的样式）
缺点在于制作麻烦，需花较大精力去调兼容性问题

1.4 移动端技术解决方案

1.4.1 兼容性问题

基本使用的都是webkit内核，对H5C3的兼容性很好可以使用。

1.4.2 移动端CSS初始化

normalize.css
去官网下载，用的时候直接复制即可（代码文件夹里有）

1.4.3 CSS3盒子模型

传统的盒子是width+border+paddingbox-sizing:content-box这行代码是默认的
换一行代码box-sizing:border-box，padding和border不会再撑大盒子；

移动端可以全部css3盒子模型；
PC端如果需要完全兼容，就用传统，不考虑兼容就选择CSS3盒子模型

1.4.4 特殊样式

CSS3盒子模型
box-sizing:border-box
-webkit-box-sizing:border-box

---

移动端点击时会有高亮我们需要清除
-webkit-tap-highlight-color:transparent

---

去掉移动端默认的一些样式（如按钮输入框），去掉之后才能对其进行自定义样式
-webkit-appearance:none;

---

禁用长按页面时的弹出菜单
img,a {-webkit-touch-callout:none;}

1.5移动端常见布局

1. 单独制作移动端页面
   流式布局（百分比布局）
   flex弹性布局
   less+rem+媒体查询布局
   混合布局

2. 响应式页面兼容移动端
   媒体查询
   bootstrap

2 移动端开发之流式布局

盒子的宽度设置成百分比，根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充；
防止盒子因为浏览器缩放的过大或过小导致内容不在一行显示，给父盒子设置以下属性：max-width/height:最大宽度/高度 min-width/height: 最小宽度/高度

案例： 京东移动端首页制作

1.技术选型（用什么布局）
2.搭建相关文件夹结构
3.设置视口标签及引入初始化样式

---

头部模块：
!行高1.5是指当前字体的1.5倍行高
居中对齐不了（margin:0 auto)
为什么要给ul单独清除内外边距？（清除前第一个li前面没有背景色）
图片默认和文字基线对齐，所以即使有垂直居中，图片仍然没有在中间位置。vertical-align:middle

---

搜索模块：
思路：给中间的盒子一个margin，因为左右两边是定位不占有位置，中间这个标准流盒子不给宽度就跟父盒子一样宽，父盒子用的是百分比，所以标准流也会跟着变化，适合移动端；
给中间margin-top时出现了外边距合并，和旁边的一起往下掉了，给父级加一个overflow:hidden
插入图片之后通常都要调大小background-size；
给盒子里放after伪元素，虽然盒子里有图片但它是背景图，盒子实际上是空的，小竖线就跑到盒子左边了–加一个定位；
二倍精灵图制作：
在PS里ctrl+T缩放；再去量所需小图标的位置；代码里background-size也要写：变为精灵图原来宽度的一半（前面的缩放只是在ps里缩放了）

---

主体区：
为了让搜索框在图片下面且能在浏览器往下浏览时固定在顶部，把定位改为固定定位。（加了固定定位的盒子一定要给宽度，还加上了最大和最小宽度？？？）

---

导航栏：
用nav标签时，css里写的是nav不是.nav（找这个错误找了半天）

3 移动端开发之flex布局（P415-440)

3.1 flex布局原理

弹性布局也叫做伸缩布局，任何一个容器都可以指定为flex布局；
为父盒子设置flex布局后，子元素的float、clear、vertical-align属性将会失效；
采用flex布局的元素，称为flex容器（简称容器）；他的所有子元素自动成为容器成员，称为flex项目（简称项目）；
项目可以纵向排列也可以横向排列；
总结起来就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
display:flex

3.2 flex布局父项常见属性

3.2.1 flex-direction 设置主轴的方向

默认的主轴是x轴方向，水平向右；
默认的侧轴是y轴方向，水平向下；
通过属性值确定哪个是主轴
属性值：

属性值	说明
row	从左到右，这是默认的，可以不用写
row-reverse	从右到左
column	从上到下，主轴是y轴
column-reverse	从下到上

翻转之后顺序也会改变不单单只是从左边挪到右边去

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

使用这个属性前一定要确认主轴是哪个

属性值	说明
flex-start	从头部开始，这是默认的
flex-end	从尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边在平分剩余空间

flex-end（没有翻转）跟上面的row-reverse有区别（有翻转）

3.2.3 flex-wrap 设置子元素是否换行

flex中默认不换行

属性值	说明
nowrap	不换行，默认
wrap	换行

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

在子项为单项时使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值）

有拉伸的时候子盒子不能有高度，不然这个效果实现不了

3.2.5 align-content 设置侧轴的子元素排列方式（多行）

设置子项在侧轴的排列方式，只能用于子项出现换行的情况

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值）
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分

align-content与align-items的区别：
一个适用于多行，一个单行；
align-content可以设置的属性多了平均分配

3.2.6 flex-flow

flex-direction和flex-wrap的符合属性flex-flow: row wrap

3.3 flex布局子项常见属性

3.3.1 flex属性

定义子项目分配剩余空间，用flex表示占多少份数（类似于前面的百分比）.item{flex:1}

前面案例中的中间搜索框用这个做更简单，两边盒子固定，中间的盒子自己占一份就可以；
如果三个盒子其中一个想多占一部分：可以用nth-child选出来然后flex：2占两份，这一个大盒子就会被分成4份。

3.3.2 align-self控制子项自己在侧轴上的排列方式

align-self允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性；
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
这一属性允许在其他子项已经设置对齐在某一边时，单独拿出来。
span:nth-child(2) {alig-self:flex-end}

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

数值越小排列越靠前，默认为0
例如有123个span盒子，想把第二个盒子提到最前面，给他设置order:-1即可

3.4 案例：携程网首页

固定定位跟父级没关系，它以屏幕为主，所以我们要给固定定位的盒子一个宽度（即使是写100%也可以）

c3盒子模型中想要垂直居中，不能用以前的line-height=height，因为上下有边框，但是盒子做了自减，实际内容区变小，原本26px的行高，在24px的内容装不下，字体下面空白行间距溢出，所以字体看起来偏下
html文件里引入外部css的顺序有讲究，后面的样式会覆盖前面的

flex:1，里面除了几份还可以写百分比；
10个盒子想站两行，父盒子强制换行之后，子盒子每个占20%就可以实现换行


给h2写内容，用缩进+溢出隐藏 隐藏起来（如果不做这一步，下面的after不能生效，原理不清楚）

背景渐变

必须添加浏览器私有前缀
起始方向可以是：方位名词或者度数，可以是左上角（写为top left，即可）中间有空格
颜色可以是各种形式
background:-webkit-linear-gradient(起始方向，颜色1，颜色2)

4 移动端开发之rem布局（P441-P468）

页面布局文字能随着屏幕大小而变化；
可以让高度也发生改变；
屏幕改变时，元素高度和宽度可以等比例缩放

4.1 rem基础

rem单位：
em相对于父元素的字体大小（即使是个空盒子设置字体大小12px，给p设定10emx10em就会让这个p盒子变为120pxx120px）
rem（root em）也是一个相对单位，相对于html元素的字体大小；他的优势在于可以通过修改html中的文字大小来改变页面中元素的大小实现整体的一个控制。

4.2 媒体查询（Media Query)

是css3新语法，可以针对不同的屏幕尺寸设定不同的样式，当重置浏览器大小的过程中，页面会根据浏览器宽度和高度重新渲染页面
语法规范：@media mediatype and | not | only (media feature) {css -code}

1. mediatype查询类型：
   将不同的终端设备分为不同类型
   all：用于所有设备；
   print：用于打印机和打印预览；
   screen：用于电脑屏幕、平板、手机等；
2. 关键字：
   将媒体类型和多个媒体特性连接到一起作为媒体查询的条件
   and：且
   not：非，可以省略
   only：指定某个特定的媒体类型，可以省略
3. 媒体特性：
   根据不同媒体类型的媒体特性设置不同的展示风格，注意要加小括号。暂且了解三个
   width：定义输出设备中页面可见区域的宽度
   min-width：定义输出设备中页面最小可见区域的宽度
   max-width：定义输出设备中页面最大可见区域的宽度

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

这句话的意思就是： 在我们屏幕上并且最大的宽度是800像素 设置我们想要的样式+宽度小于500时的样式变为紫色。
注意点：
screen和and不能省略，and后有空格 单位px不能省略

**小案例：**屏幕小于540蓝色，小于970绿色，大于等于970红色
利用css的层叠性，用从小到大来写

@media screen and (max-width: 539px) {
    body {
        background-color: blue;
    }
}
@media screen and (min-width: 540px) {
    body {
        background-color: green;
    }
}
@media screen and (min-width: 970px) {
    body {
        background-color: red;
    }
}

注意里面最大和最小到底改写哪一个（数学问题）

---

rem+媒体查询可以实现根据屏幕尺寸不同，里面元素跟着变化的效果；
元素高度行高等设置为rem单位；在style中设定媒体查询，设置不同的屏幕尺寸，html的font-size不同；元素就会跟着屏幕尺寸来进行改变。

---

引入资源（理解）
当样式繁多时，可以针对不同的媒体使用不同的stylesheets(样式表)；
原理就是直接在link中判断设备的尺寸，然后引用不同的css文件；
语法规范：
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">

4.3 Less基础

4.3.1 维护css的弊端

css是一门非程序式语言，没有变量、函数、scope（作用域）等概念

• 需要大量书写看似没有逻辑的代码，冗余度高；
• 不方便维护及扩展，不利于复用（需要一个个去改样式）
• css没有很好的计算能力（例如想要图片根据不同屏幕尺寸设置与宽度或者宽度的比例，只能一个个计算并写死，很麻烦）

4.3.2 less介绍与使用

Less(Leaner Style Sheets)是一门css扩展语言，也称为CSS预处理器。扩展了CSS的动态特性
Less中文网址：http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus。

---

使用：
创建后缀为less的文件，书写less语句；
常用的：

• Less变量
• Less编译
• Less嵌套
• Less运算

4.3.3 Less变量

变量命名规范：@变量名:值;
以@为前缀；
不能包含特殊字符；
不能以数字开头；
大小写敏感。

@color: pink;   更改可以统一在这里更改
@font14: 14px;
body {
    background-color: @color;
}
div {
    color: @color;
    font-size: @font14;
}

4.3.4 Less编译

把我们的less文件，编译生成为css文件，才能引入html中使用。
安装vscode插件：Easy LESS

4.3.5 Less嵌套

选择器的嵌套：子元素直接写在父元素里面；
如果遇见伪类、交集选择器、 伪元素选择器 内层选择器的前面需要加&；
没有&这个符号会被认为是父选择器的后代，有了之后则是父元素自身或父元素的伪类

<div class="nav">
    <div class="logo">传智播客</div>
</div>
----
.nav {
    .logo {
        color: green;
    }
    &::before {
        content: "";
    }
}

4.3.6 Less运算

任何颜色数字变量都可以参与运算加+减-乘*除/；
新的less不能直接用除法，要加括号例如(50/40rem)
运算符两边都要加空格；
两个不同单位的值之间的运算，结果取第一个值的单位；
两个值之间只有一个有单位，就去这个单位；
颜色的运算#666 - #222会得到#444；
可以有复杂运算，带小括号等

4.4 rem适配方案

原理：
按照设计稿与设备宽度的比例，动态计算并设置html跟标签的font-size大小（媒体查询）
css中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值。
使用：
技术方案1：less、媒体查询、rem
技术方案2：flexible.js、rem

不明白就画个图理解；
最后的公式：页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)；
屏幕宽度/划分的份数就是html font-size的大小

4.5 案例：苏宁首页案例制作（技术方案1）

1.跟之前一样建文件夹
2.设置公共common.less文件：设置好常见屏幕尺寸下的html的font-size，因为除了首页其他页面也需要。（因为PC端也可以打开，所有要设置一个默认的html字体大小，这个案例设置为15份，默认html字体大小为50px–这句话要写在最上面，因为代码从上开始执行）

html {
    font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @no;
    }
}

3.新建index.less，写首页的样式；
在index.less里引入刚才设置好的common.less@import "common"; 这时index.css里就会出现common.less里的样式

• @import是把一个样式文件引入另一个样式文件
• link是把样式文件引入html页面里；

这样写在html里面可以少引用一个common.css，直接引入index.css即可

4.6技术方案2来制作苏宁页面(flexible.js)

不需要写不同屏幕的媒体查询，因为js做了处理；
原理是把当前设备分为10等分，不同设备下比例是一致的；
要做的就是确定当前页面的html文字大小；
如750px的设计稿，只需把html文字大小设置为75px；
里面元素的rem值:页面元素的px值 /75
剩余的让flexible.js来算
（这个文件在github上下载）
这个写法在PC端放大缩小的时候更丝滑（比起直接用媒体查询写死），因为每一步都计算过了；
flexible的大小是根据当前屏幕规定的，所以width直接写10rem就不对；所以要限定屏幕大小超过750px时也要按照750设计稿来走。
html文字在超过750px强制显示为50px需要用到媒体查询，而不是直接写html{font-size=50px}，（不超过750px时不需要这个写法，js会自动算）

5 黑马面面项目（直播内容，有git的使用）

在给的文件夹里有一个详细的md文件
摹客平台的使用：先注册，下载PS插件，安装完exe，PS在扩展功能里就会出现摹客了

在psd中选中想要的图层选择标记切片，之后上传，查看项目时，双击然后点击开发就可以看到每个模块的详细参数，不需要测量了，点击右侧就可以复制参数，右下方还会有css代码可以直接复制；想要看到之前上传的切图，鼠标点击图片以外的空白区域即可出现切图页面，下载即可；
可以在自定义中设置750px。
测某个模块与边框的距离，单击选中这个模块，鼠标移到想要测得边框上就会显示；
swiper插件：制作轮播图（在另一篇笔记讲了简单的用法）

引入js：在body中引入（放在body最后），检查元素里面有font-size就表示引用成功（忘了，回去补一下）
.js文件在哪里引入都可以；
关于10等分却是37.5的问题：因为是以iphone6来设计，他的宽度是375，每份就是37.5。

• 图片调不了大小，flex布局感觉也失败了，虽然网页显示有flex容器，所有的a还是在一排，并且没有根据设定的宽度进行排列和换行
  如果有多个轮播图，在js代码中new对象的时候改一下名字，因为从模板复制下来的都是一样的

利用Git上传到码云（gitee） p496

6 响应式布局

6.1 响应式开发原理

响应式需要一个父级作为布局容器，来配合子元素实现变化效果；
原理就是在不同屏幕下，通过媒体查询改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

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

平时我们的响应尺寸划分：
超小屏幕(<768px)：设置宽度为100%
小屏幕（>=768px）：设置宽度为750px
中等屏幕(>=992px):设置宽度为970px
大屏幕（>=1200px）：设置宽度为1170px

6.2 Bootstrap前端开发框架

使用方法：
1.创建bootstrap文件夹（跟images等放在一起）；官网下载（文件夹里也包含一个css文件夹，这是bootstrap的css文件）；
2.
跟自动生成的略有不同；条件注释只有IE浏览器能识别（if it IE 9）这一句；
3.引入相关的样式文件（bootstrap文件夹里的min.css文件）
4.书写内容 bootstrap主要是通过类名来引入样式的，所以有些样式的盒子可以自己更换，样式也可以根据需要自己继续修改（注意权重）

布局容器：
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container，它提供了两个类

• container类：已经给各个屏幕宽度设置好了宽度，不用再进行媒体查询即可实现变大变小；
• container-fluid类：流式布局容器百分百宽度，占据全部视口的容器，适合于单独做移动端开发

6.3 Bootstrap栅格系统

6.3.1 栅格系统原理

原理就是container被自动划分成12份，BS里container的宽度是固定的，但在不同屏幕下，它的宽度不同，每一份也就随之变化；
rem是windows被划分；bs是container被划分

6.3.2 栅格选项参数

栅格系统是通过一系列的行（row）和列（column）的组合来构建页面布局，内容可以放入这些布局中。

• 行（row）必须要放到container布局容器里
• 为了实现列的平均划分，需要给列添加类前缀
• xs：extra small 超小； sm：small； md：medium中等；lg-large 大，对应前面设备划分的屏幕大小
• 类前缀分别为：.col-xs- .col-sm- .col-md- .col-lg-;最后的横线后面跟的是当前这个孩子占的份数；
• 如果所有孩子份数相加小于12，会在最后留白；如果大于12，多的那一列会另起一行显示；
• 每一列默认有左右15像素的padding；可以手动去除
• 可以同时为一列指定多个设备的类名，以便划分不同份数，例如 class=“col-md-4 col-sm-6”

6.3.3 列嵌套

小细节：如果想要一行的每一列之间有空隙，不能直接margin，会被挤下来，因为这个BS的实现原理是用媒体查询，然后指定了所占宽度的百分比，加了margin一定会掉下来。实现原理：在这个盒子里再放一个盒子100%宽度，然后给一个padding值

一个列里再分成若干份：在这一列中再加一个row然后再分配份数，这样既可以取消父元素的padding值，又可以让高度和父级一样

6.3.4 列偏移

可以将某一列往右边偏移一定的份数，例如两个盒子各占4份，并且想要左右对齐，偏移的份数就是12-两个盒子的份数=4；这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）

.col-md-offset-4类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度

6.3.4 列排序

简单理解：将左右两个盒子互换位置
order-12表示当前元素会到最后去；
order-1表示当前元素会到最前面去（如果第一个盒子没有给order，那order-1会在这个盒子之后）；
但是first和last则不同

col order-12 
col order-1
col order-last（代表order为 行数+1，即为最后）
col order-first（代表order为-1，即为最前）

6.3.5 响应式工具

针对不同设备显示或隐藏页面内容

• 不知道第四版的语法变了没有（没找到）

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见

以下省略，visible-xs等是让它在某个页面显示

6.4 阿里百秀案例制作

VW/VH布局

怎么扒b站的字体图标：
检查元素找到 打开样式表 复制字体图标的url（eot结尾的）但是我在谷歌浏览器检查没看到这个元素。

设置less自动生成的css文件的保存位置（css和less文件都放在各自的文件夹方便后期打包）：
在easyless的扩展设置里的less.compile里加一句"less.compile": {"out": "../css/" }

px转换成vw的插件：px2vw