（一）移动端 Web 开发基础

文章目录

一、移动 Web 开发基础概念1. 像素(1) 分辨率(2) 物理像素(3) CSS 像素(4) 设备像素比(5) 标清屏和高清屏(6) 缩放(7) PPI / DPI 2. 视口 viewpSEO靠我ort 二、移动 Web 开发基础知识1. box-sizing2. 图标字体3. flex 布局(1) 什么是 flex 布局(2) flex 布局的基本概念(3) flex 容器的属性(4) flSEO靠我ex 项目的属性 4. 媒体查询(1) 什么是媒体查询（media query）(2) 为什么需要媒体查询(3) 媒体类型(4) 媒体查询中的逻辑(5) 媒体特征表达式(6) 媒体查询策略 5. 移动SEO靠我端常用单位 三、响应式布局1. 概念2. 原理3. 结构、内容、布局4. 优、缺点5. 栅格系统 四、移动端屏幕适配1. 介绍(1) 与响应式布局的关系 2. 简单适配3. 通用适配

一、移动 Web SEO靠我开发基础概念

1. 像素 (1) 分辨率 1798 x 828 像素分辨率：

横向有 828 个点，纵向有 1792 个点 (2) SEO靠我物理像素 物理像素（physical pixel），也可以叫做设备像素（dp：device pixel）实际开发中不会以物理像素为准 (3) CSS 像SEO靠我素 CSS 像素，也可以叫做逻辑像素（logical pixel）、设备独立像素（dip：device independent pixel）是实际开发中使用的像素 SEO靠我 .box {width: 200px;height: 200px; } (4) 设备像素比 设备像素比（dpr：dSEO靠我evice pixel ratio）dpr = 设备像素 / CSS 像素（缩放比是 1 的情况下）

dpr = 2 表示 1 个 CSS 像素用 2x2 个设备像素来绘制

(5) 标清屏和高清屏 SEO靠我 (6) 缩放 缩放改变的是 CSS 像素的大小缩放——放大缩放——缩小 (7) PPI / DPI PPI：Pixels Per InchDSEO靠我PI：Dots Per Inch每英寸的物理像素点 2. 视口 viewport 设置视口： <meta name="viewport" contenSEO靠我t="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"> SEO靠我 获取视口宽度： <script>console.log(window.innerWidth);console.log(document.documentElement.clientSEO靠我Width);console.log(document.documentElement.getBoundingClientRect().width);var viewWidth = document.SEO靠我documentElement.clientWidth || window.innerWidth;// 兼容性问题，不要用// console.log(screen.width);// dprconsSEO靠我ole.log(window.devicePixelRatio); </script>

二、移动 Web 开发基础知识

1. box-sizing

box-sizing 的两个值：

conteSEO靠我nt-box

盒模型宽 / 高 = width / height + padding + border

（向外扩张）border-box

盒模型宽 / 高 = width / height

（向内压缩） SEO靠我 2. 图标字体 图标字体库：iconfont-阿里巴巴矢量图标库引入方式：<i class="iconfont icon-scan"></i> 3. fleSEO靠我x 布局 (1) 什么是 flex 布局 Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"SEO靠我 (2) flex 布局的基本概念flex 容器（flex container）

:

采用 flex 布局的元素，称为 flex 容器 .box {display: fleSEO靠我x | inline-flex; }flex 项目（flex item）

:

flex 容器的所有子元素自动成为容器成员，称为 flex 项目

（只是子元素成为容器成员，孙子元素等不会成为容SEO靠我器成员） 项目默认沿主轴（main axis）排列 (3) flex 容器的属性display 属性

display 属性决定是否使用flex布局

flex：将对象作为弹SEO靠我性伸缩盒显示

inline-flex：将对象作为内联块级弹性伸缩盒显示 .box {display: flex | inline-flex; } flex-directioSEO靠我n 属性

flex-direction 属性决定主轴的方向（即项目的排列方向）

① row（默认值）：主轴为水平方向，起点在左端

② row-reverse：主轴为水平方向，起点在右端

③ column：主轴SEO靠我为垂直方向，起点在上沿

④ column-reverse：主轴为垂直方向，起点在下沿 .box {flex-direction: row | row-reverse | column |SEO靠我 column-reverse; }flex-wrap 属性

默认情况下，项目都排在一条线（又称 “轴线” ）上

flex-wrap 属性定义，如果一条轴线排不下，如何换行

① nowrapSEO靠我（默认）：不换行

② wrap：换行，第一行在上方

③ wrap-reverse：换行，第一行在下方 .box{flex-wrap: nowrap | wrap | wrap-reversSEO靠我e; }flex-flow 属性flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap .SEO靠我box {flex-flow: <flex-direction>; || <flex-wrap>; }justify-content 属性

justify-content 属性定义了项目SEO靠我在主轴上的对齐方式

① flex-start（默认值）：左对齐

② flex-end：右对齐

③ center： 居中

④ space-between：两端对齐，项目之间的间隔都相等（项目与边框之间没有间隔）SEO靠我

⑤ space-around：每个项目两侧的间隔相等；所以，项目之间的间隔比项目与边框的间隔大一倍 .box {justify-content: flex-start | flex-eSEO靠我nd | center | space-between | space-around; }align-items 属性

align-items 属性定义项目在交叉轴上如何对齐

① flexSEO靠我-start：交叉轴的起点对齐

② flex-end：交叉轴的终点对齐

③ center：交叉轴的中点对齐

④ baseline: 项目的第一行文字的基线对齐

⑤ stretch（默认值）：如果项目未设置高度SEO靠我或设为auto，将占满整个容器的高度 .box {align-items: flex-start | flex-end | center | baseline | stretch; SEO靠我 }align-content 属性

align-content 属性定义了多根轴线（多行）在交叉轴上的对齐方式

如果项目只有一根轴线（一行），该属性不起作用

① flex-start：与交叉轴SEO靠我的起点对齐

② flex-end：与交叉轴的终点对齐

③ center：与交叉轴的中点对齐

④ space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

⑤ space-around：每根轴线两侧SEO靠我的间隔都相等；所以，轴线之间的间隔比轴线与边框的间隔大一倍

⑥ stretch（默认值）：轴线占满整个交叉轴 .box {align-content: flex-start | flexSEO靠我-end | center | space-between | space-around | stretch; } (4) flex 项目的属性order 属性

ordSEO靠我er 属性定义项目的排列顺序

数值越小，排列越靠前，默认为 0 .item {order: <integer>; } flex-grow 属性

flex-grow 属性定义项SEO靠我目的放大比例，默认为 0，即如果存在剩余空间，也不放大

① 如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）

② 如果一个项目的 flex-grow 属性为 2，其他项SEO靠我目都为 1，则前者占据的剩余空间将比其他项多一倍

③ 如果有的项目有 flex-grow 属性，有的项目有 width 属性，有 flex-grow 属性的项目将等分剩余空间 .itemSEO靠我 {flex-grow: <number>; /* default 0 */ }flex-shrink 属性

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，SEO靠我该项目将缩小

① 如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小

② 如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小

③ SEO靠我负值对该属性无效 .item {flex-shrink: <number>; /* default 1 */ }flex-basis 属性

flex-basis 属性定义SEO靠我了在分配多余空间之前，项目占据的主轴空间（main size）

浏览器根据这个属性，计算主轴是否有多余空间

它的默认值为 auto，即项目的本来大小 .item {flex-basis: SEO靠我<length>; | auto; /* default auto */ }flex 属性

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简SEO靠我写，默认值为 0 1 auto（后两个属性可选）

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto) .item {flex: none | [ <fSEO靠我lex-grow> <flex-shrink>? || <flex-basis> ] }align-self 属性

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

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch .item {align-selSEO靠我f: auto | flex-start | flex-end | center | baseline | stretch; } 4. 媒体查询 SEO靠我 (1) 什么是媒体查询（media query） @media screen and (min-width: 900px) {body {backgrounSEO靠我d-color: red;} } (2) 为什么需要媒体查询 一套样式不可能适应各种大小的屏幕针对不同的屏幕大小写样式，让我们SEO靠我的页面在不同大小的屏幕上都能正常显示 (3) 媒体类型 all (default)screen / print / speech SEO靠我 @media (min-width: 900px) {body {background-color: red;} }@media print and (min-width: SEO靠我900px) {body {background-color: red;} } (4) 媒体查询中的逻辑 与 ( and )或SEO靠我 ( , )非 ( not ) /*与*/ @media screen and (min-width: 900px) and (max-width: 1SEO靠我024px) {body {background-color: red;} } /*或*/ @media screen and SEO靠我(min-width: 1024px), (max-width: 900px) {body {background-color: red;} } @meSEO靠我dia screen and (min-width: 1024px), screen and (max-width: 900px) {body {background-color: red;} SEO靠我 } /*非*/ @media not screen and (min-width: 900px) and (max-width: 10SEO靠我24px) {body {background-color: red;} } @media not screen and (min-width: 102SEO靠我4px), screen and (max-width: 900px) {body {background-color: red;} } (5) 媒体SEO靠我特征表达式 width / max-width / min-width-webkit-device-pixel-ratio / -webkit-max-device-pixelSEO靠我-ratio / -webkit-min-pixel-ratioorientation: landscape 横屏 / portrait 竖屏heightdevice-width / device-hSEO靠我eight

screen.width / screen.heightaspect-ratio 视口的宽高比 (6) 媒体查询策略 <style>/*css reset*/SEO靠我* {box-sizing: border-box;padding: 0;margin: 0;}body {padding-top: 200px;}img {width: 100%;height: 1SEO靠我00%;}.row {width: 100%;display: flex;flex-wrap: wrap;}.col {padding-top: 10px;padding-bottom: 10px;bSEO靠我ackground-color: rgba(86, 61, 124, 0.15);border: 1px solid rgba(86, 61, 124, 0.2);}/*断点xs: < 576pxsmSEO靠我: 576px ~ 768pxmd: 768px ~ 992pxlg: 992px ~ 1200pxxl: > 1200px断点怎么来的改变屏幕大小，当页面显示不正常的时候，你就需要设置断点了经验值预SEO靠我设一些*//*@media (max-width: 576px) {.col {width: 100%;}}@media (min-width: 577px) and (max-width: 768pSEO靠我x) {.col {width: 50%;}}@media (min-width: 769px) and (max-width: 992px) {.col {width: 25%;}}@media (SEO靠我min-width: 993px) and (max-width: 1200px) {.col {width: 16.6666666667%;}}@media (min-width: 1201px) SEO靠我{.col {width: 8.333333333%;}}*//*pc first*//*.col {width: 8.333333333%;}@media (max-width: 1200px) {SEO靠我.col {width: 16.6666666667%;}}@media (max-width: 992px) {.col {width: 25%;}}@media (max-width: 768pxSEO靠我) {.col {width: 50%;}}@media (max-width: 576px) {.col {width: 100%;}}*//*mobile first*/.col {width: SEO靠我100%;}@media (min-width: 576px) {.col {width: 50%;}}@media (min-width: 768px) {.col {width: 25%;}}@mSEO靠我edia (min-width: 992px) {.col {width: 16.6666666667%;}}@media (min-width: 1200px) {.col {width: 8.33SEO靠我333333%;}}</style> 5. 移动端常用单位 px：像素%：利用百分比设置宽度em：font-size 的倍数，可用于文字段落缩进rem：对应 htmlSEO靠我 的 font-sizevw：viewport width，50vw 即为视口宽度的 50%vh：viewport height，50vh 即为视口高度的 50%

三、响应式布局

1. 概念 SEO靠我 2010 年 5 月由 Ethan Marcotte 提出的一个概念一个网站兼容多种终端响应式布局：对不同屏幕尺寸（大小）做出响应，并进行相应布局的一种移动 Web 开发方式 SEO靠我 2. 原理 如何响应不同的屏幕尺寸媒体查询 3. 结构、内容、布局

4. 优、缺点 优点：

一个网站能够兼容多种终端，不用为每SEO靠我种终端开发一个网站缺点：

需要兼容多种终端，工作量大，效率低下；

代码累赘，加载时间长（在特定终端会出现无用代码）适用场景：

适用于结构比较简单的页面（展示性质的网站），比如企业站等；

不适用于结构复杂、交互SEO靠我多的页面（功能性网站），比如电商网站等 5. 栅格系统 响应式布局的一种实现方式将页面栅格化

四、移动端屏幕适配

1. 介绍 移动端屏幕适配：使页面SEO靠我在移动端各种大小的屏幕上都能够正常显示的一种移动端开发方案 (1) 与响应式布局的关系 适应各种屏幕尺寸移动端适配疑问

1）必须使用 rem ？

不是

px、SEO靠我%、em、rem、vw / vh 只要合适都可以使用

2）媒体查询只能用在响应式布局？

不是，只要合适都可以使用 2. 简单适配 1rem = viewWidth / 系数SEO靠我（18.75）

simple.js

(function () {use strict;setRemUnit();window.addEventListener(resize, setRemUnit);fuSEO靠我nction setRemUnit() {var docEl = document.documentElement;var ratio = 18.75;var viewWidth = docEl.geSEO靠我tBoundingClientRect().width || window.innerWidth;docEl.style.fontSize = viewWidth / ratio + px;} SEO靠我 })(); 3. 通用适配 (function () {use strict;// dpr->scale = 1 / dprvar docEl = docuSEO靠我ment.documentElement,viewportEl = document.querySelector(meta[name="viewport"]),dpr = window.devicePSEO靠我ixelRatio || 1,maxWidth = 540,minWidth = 320;dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);docEl.setAttribSEO靠我ute(data-dpr, dpr);docEl.setAttribute(max-width, maxWidth);docEl.setAttribute(min-width, minWidth);vSEO靠我ar scale = 1 / dpr,content = width=device-width, initial-scale= + scale + , maximum-scale= + scale +SEO靠我 , minimum-scale= + scale + , user-scalable=no;if (viewportEl) {viewportEl.setAttribute(content, conSEO靠我tent);} else {viewportEl = document.createElement(meta);viewportEl.setAttribute(name, viewport);viewSEO靠我portEl.setAttribute(content, content);document.head.appendChild(viewportEl);}setRemUnit();window.addSEO靠我EventListener(resize, setRemUnit);function setRemUnit() {var ratio = 18.75;var viewWidth = docEl.getSEO靠我BoundingClientRect().width || window.innerWidth;// console.log(viewWidth);if (maxWidth && (viewWidthSEO靠我 / dpr > maxWidth)) {viewWidth = maxWidth * dpr;} else if (minWidth && (viewWidth / dpr < minWidth))SEO靠我 {viewWidth = minWidth * dpr;}docEl.style.fontSize = viewWidth / ratio + px;} })();