移动端开发基础总结

移动端学习总结 (适合于复习)

移动端基础

技术选型：

单独制作移动端页面（主流）
- 流式布局（百分比布局）
- flex弹性布局（强烈推荐）
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端（其次）
- 媒体查询
- BootStrap

meta视口标签

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

一些特殊样式：

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

`less`基础

Less（Leaner Style Sheets 的缩写）是一种向后兼容的 CSS 语言扩展。这是 Less 语言和 Less.js 的官方文档，Less.js 是将 Less 样式转换为 CSS 样式的 JavaScript 工具。

因为 Less 看起来就像 CSS，所以学习起来很容易。 Less 只对 CSS 语言做了一些方便的补充，这也是它可以学得这么快的原因之一。

`less`安装

安装less
npm install less -g查看安装版本
lessc -v编译less文件
lessc style.less style.cssvscode安装easy less插件
保存就会自动编译为css文件vscode安装插件cssrem，可以让px单位自动转换为rem单位
当让我们需要在 设置 -> 拓展设置 -> cssRem config -> 修改默认的根字体大小  (也就是你的设计稿尺寸/划分的份数)

`less`变量

@变量名：值;

命名规范：

必须有@ 为前缀
不能包含特殊字符
不能以数字开头
大小写敏感


@color: rgb(0, 0, 0);
@height: 200px;
@baseFont: 50px;div {background-color: hotpink;height: @height;color: @color;
}

`less`嵌套和计算

/*最新版的less在使用除法运算时，需要加 英文括号 或者使用 ./ */
* {padding: 0; margin: 0 auto;}
html {font-size: @baseFont}
//less嵌套
.outer {font-size: 16px;height: 6rem;width: (300rem / @baseFont);//width: 300rem ./ @baseFont;margin: 0 auto;border: 1px solid antiquewhite;background-color: olive;border-radius: 10%;padding: 10px;.inner {background-color: #9198e5;height: 1rem;width: 50px;margin: 0 auto;border-radius: 10%;text-align: center;a {color: @color;display: inline-block;text-decoration: none;transition: all 0.2s linear;//给a标签添加鼠标悬浮样式&:hover {color: #ff96ce;transform: scale(1.2);}}//给inner类添加鼠标悬浮样式&:hover {}}
}

布局方式

流式布局

也就是百分比布局，你想让这个元素占用父元素的多大宽度，直接设置相应的宽度百分比即可

优点：

优点很明显，可以适应屏幕宽度的变化，父盒子宽度的变化，自身的宽度也会相应的去改变，避免了留白

缺点：

因为宽度是由百分比来定义的，高度和文字大小使用px来设定的，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度﹑文字大小还是和原来一样(即，这些东西无法变得“流式”），显示非常不协调

媒体查询

语法规范：

用@media 开头，注意@符号
mediatype媒体类型（screen、print）
关键字 and、 not、 only
media feature 媒体特性，要有括号包裹

示例：

嵌入在<style>标签里面：

@media screen|print and|not|only (max-width=320px) {}

引入资源：

<!--在符合这个媒体条件时引入相应的样式文件-->
<link rel="stylesheet" href="index.css" media="screen and (min-width=750px)">

通过媒体查询改变html font-size大小，从而实现页面使用rem为单位的元素也相应的缩放改变，从而实现适配不同宽度的设备
简单地例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0 auto;}html, body {font-size: 50px;}.outer {height: 500px;width: 500px;background-color: khaki;border: 1px solid cadetblue;border-radius: 5%;padding: 5px;}.inner {height: 2rem;width: 2rem;background-color: #e66465;}/*当屏幕宽度大于等于900px时，应用以下样式，配合html根元素的font-size的大小改变，使用rem单位的元素大小也会相应的变化*/@media screen and (min-width: 700px) {.inner {background-color: linen;}html {font-size: 70px;}}@media screen and (min-width: 800px) {.inner {background-color: #f5bb84;}html {font-size: 100px;}}@media screen and (min-width: 900px) {.inner {background-color: #ef7b05;}html {font-size: 120px;}}</style>
</head>
<body>
<div class="outer"><div class="inner"></div>
</div>
</body>
</html>

`flex`弹性布局

通过设置元素的display属性为flex（块状元素）或者inline-flex（内联元素），便可以将一个盒子指定为伸缩盒子，其子元素也都便成为伸缩项目，子元素的float、clear和vertical-align属性将失效, 伸缩子元素也可通过设置display:flex指定成伸缩盒子，也就是伸缩盒子可以嵌套 。

注意：并不是所有的浏览器都能支持伸缩盒子，IE11+、Firefox20.0+、Opera12.1+、Chrome21.0+以及Safari6.1+能支持。

父元素所具有的属性

1. 主轴方向flex-direction: row (default) / column / row-reverse / column-reverse2. 主轴排列方式justify-content: flex-start (default) / flex-end / center / space-between / space-around / space-evenly3. 纵轴排列方式（针对纵轴只有单行有效）align-items: flex-start / flex-end / center / stretch(default) / space-between / space-around / baselinestretch：子元素未设置高度或者是高度为auto，那么，子元素将被拉伸以适应容器，是默认值4. 纵轴排列方式（针对纵轴有多行有效）align-content: flex-start / flex-end / center (default) / space-between / space-around / space-every5. 主轴宽度不够是否可以换行（默认不可换行）flex-wrap: wrap / no-wrap (default) / wrap-reverse6. 复合属性简化 主轴方向 和是否 可换行flex-flow: flex-direction  flex-wrap

子元素所具有的的属性

1. 子项顺序order:  0(默认)
用整数值来定义伸缩容器子元素的排列顺序，默认是0，可以为负值，数值越小越排在前面2. 子项伸缩复合属性flex: 0 (默认) / 自己可以给各个子项划分份数来达到自定义布局的需求3. 子项自身纵向排布(默认继承align-items的值，单独设置覆盖，此时局域底部)align-self: flex-start / flex-end / center

`rem`布局

先来聊聊 em 和 rem 的区别

em相对于父元素的fontsize大小来设置大小的，设置的值为父元素的fontsize大小的几倍
em参考的是它的父级font-size大小
rem参考的是html根元素的font-size大小

rem实际开发适配方案

根据设备宽度的不同，动态的计算并设置html根标签的font-size大小(可以使用媒体查询在到达某个宽度值时，设置对应的font-size；也可以使用flexible.js)
CSS 中，设计稿元素的宽、高相对位置等的取值，按照同等比例换算为rem为单位的值(配合less的计算可以很方便)

`rem`实际开发适配方案1

原理：动态设置html根标签的 font-size 大小

假设给定的设计稿是750px
我们可以把整个屏幕划分为15等分（划分标准不一，也可以是20份或10份都可以）
每一份作为html字体的大小，这里就是 750px / 15 = 50px
那么在320px设备的时候，字体大小就是 320 / 15 = 21.33px
用我们页面元素的大小(document.documentElement.clientWidth)除以不同的html字体大小会发现他们比例还是相同的

比如我们以750为标准设计稿：

一个100*100像素的页面元素在750屏幕下，就是100/50 = 2rem => 2rem * 2rem比例是1:1
在320屏幕下，html的字体大小为21.33则2rem = 42.66px，此时宽高都是2rem = 42.66px，宽高仍是1:1
可以实现在不同屏幕下页面元素盒子等比缩放的效果

元素大小取值方法

最后的公式：页面元素的rem值 = 页面的宽度 / （屏幕宽度 / 划分的份数）

屏幕宽度/划分份数就是html font-size的大小

也就是：页面元素的rem值 = 页面的宽度 / html font-size字体大小

市场主流`rem`适配方案

- rem + less + 媒体查询
- flexible.js + rem

两种方案都存在，方案二更简单。

`flexible.js`

手机淘宝团队开发的简洁高效移动端适配库

我们咋也不需要写不同屏幕的媒体查询，因为js里面做了处理

原理：

把当前设备的宽度划分为10等份，根据不同的设备的宽度尺寸来改变html font-size的大小，从而来达到页面元素随之变化，适配不同宽度设备的目的

比如当前的设计稿是750px，那我们只需要把html文字大小设置为75px(750px/10)就可以了

页面里元素的rem值：设计稿元素的像素值px/75

接下来，在不同尺寸的设备就交给flexible.js去改变html font-size的值就好了

flexible.js源码

(function flexible (window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit () {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))

响应式布局开发

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

特点：一套代码响应多端(手机端、平板端、PC端共用一套代码)

平时我们的响应式尺寸划分

超小屏幕(手机，小于768px):设置宽度为100%；
小屏幕（平板，大于等于768px）：设置宽度为750px；
中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px；
大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px；

我们也可以根据实际自己自定义划分

响应式开发简单示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0; margin: 0;}html, body {height: 100%;width: 100%;}/*	超小屏幕：小于768px 设置宽度为100%(手机)小屏幕：大于768px,设置宽度为750px(平板)中等屏幕：大于992px,设置宽度为970px(桌面显示器)大屏幕：大于1200px, 设置宽度为1170px(大屏显示器)*/.container {background-color: #9198e5;width: 100%;min-width: 320px;height: 70%;margin: 0 auto;display: flex;flex-flow: row wrap;padding: 10px 10px;box-sizing: border-box;text-align: center;/*align-content: flex-start;*/}.container div {width: 100%;/*border: 1px solid #e66465;*/border-radius: 20px;box-sizing: border-box;/*margin: 10px 0;*/padding: 10px;background-clip: content-box;background-color: #e66465;/*height: 100px;*/}@media screen and (min-width: 768px){.container {width: 750px;}.container div {width: 50%;}}@media screen and (min-width: 992px){.container {width: 970px;}.container div {width: 33.33%;}}@media screen and (min-width: 1200px){.container {width: 1170px;}.container div {width: 25%;}}</style>
</head>
<body><div class="container"><div>导航1</div><div>导航2</div><div>导航3</div><div>导航4</div><div>导航5</div><div>导航6</div><div>导航7</div><div>导航8</div></div>
</body>
</html>