html+css移动端布局-FreeNAS中文网

admin 管理员组

文章数量: 887021

文章目录

移动端
- 一、移动端基础
- - **1 .浏览器现状**
  - **2 .手机屏幕现状**
  - **3.常见移动端屏幕尺寸**
  - **4.移动端调试方法**
  - 5.总结
- 二、视口
- - **1.布局视口** `layout viewport`
  - **2.视觉视口**`visual viewport`
  - **3.理想视口** `ideal viewport`
  - 4.meta视口标签
- 三、二倍图
- - **1.物理像素&物理像素比**
  - 2.**多倍图**
  - 3.**背景缩放 background-size**
  - **4.多倍图切图 cutterman**
- 四、移动端开发选择
- - 1.单独制作移动端页面（主流）
  - 2.响应式页面兼容移动端（其次）
- 五、移动端技术解决方案
- - **1 移动端浏览器**
  - **2.`CSS`初始化** `**normalize.css`**
  - 3 CSS3 盒子模型box-sizing
  - **4.特殊样式**
- 六、移动端常见布局
- - - 1. 单独制作移动端页面（主流）
  - 2.响应式页面兼容移动端（其次）
- 七、移动端开发之流式布局
- 八、京东移动端首页制作
- - **1.技术选型**
  - **2. 搭建相关文件夹结构**
  - **4. 常用初始化样式**
- 九、**移动WEB开发之flex布局**
- - 1.flex布局体验
  - - **1.1 传统布局与flex布局**
    - **1.2 初体验**
  - **2. flex布局原理**
  - - **1 布局原理**
  - **3.常见父项属性**
  - - - 1).flex-direction 属性决定主轴的方向（即项目的排列方向）
      - 2)justify-content 设置主轴上的子元素排列方式
      - 3)**flex-wrap** **设置子元素是否换行**
      - 4)align-items 设置侧轴上的子元素排列方式（单行）
      - 5)**align-content** 设置侧轴上的子元素的排列方式（多行）
      - 6)flex-flow
  - 4.flex布局子项常见属性
  - - - 1).flex
      - 2).**align-self** **控制子项自己在侧轴上的排列方式**
      - 3). **order** 属性定义项目的排列顺序
- 十、携程网首页案例制作
- - - **1. 技术选型**
    - **2. 搭建相关文件夹结构**
    - **3. 设置视口标签以及引入初始化样式**
    - 4.常用初始化样式
    - 5. **常见模块命名**
    - 6.**常见flex布局思路**
- 十一、背景线性渐变
- 十二、**移动WEB开发之rem适配布局**
- - 1.rem 基础
  - 2.媒体查询
  - - **1)什么是媒体查询**
    - 2)语法规范
    - - **mediatype 查询类型**
        **关键字**
        **媒体特性**
    - 3)案例
    - - **媒体查询修改背景颜色**
    - **4)媒体查询+rem实现元素变化**
    - 5) **引入资源（理解）**
  - 3.less
  - - **1)维护 css 的弊端**
    - **2)Less 介绍**
    - **3)Less 安装（注意如果使用vscode无需安装less）**
    - 4)Less使用
    - 5) Less 变量
    - 6)Less编译
    - 7)Less嵌套
    - 8)Less运算
    - 9)Less详细学习
  - 4.rem适配方案
  - - **1）我们适配的目标是什么？**
    - 2）**怎么去达到这个目标的**
    - **3）在实际的开发当中使用**
    - **4）rem 适配方案技术使用（市场主流）**
    - - **技术方案1**
        **技术方案2（推荐）**
    - 5） rem + 媒体查询 + less 技术
    - - (1)设计稿常见尺寸宽度
      - (2)动态设置 html 标签 font-size 大小
      - **(3)元素大小取值方法**
    - 6）flexible.js+rem技术
- 十三、苏宁网首页案例制作
- - - (一)rem + 媒体查询 + less 技术制作苏宁移动端首页
    - - **1. 技术选型**
      - **2. 搭建相关文件夹结构**
      - **3. 设置视口标签以及引入初始化样式**
      - **4. 设置公共common.less文件**
      - 5. 新建index.less文件
      - **6. body样式**
    - (二)flexible.js+rem技术
    - - **1. 技术选型**
      - **2. 搭建相关文件夹结构**
      - 3. 设置视口标签以及引入初始化样式还有js文件
      - 4. body样式
- 十四、VSCode px 转换rem 插件cssrem
- 十五、黑马面面布局开发
- - 1.目的
  - - 1.1 技术方案
    - 1.2 代码规范
    - 1.2 目录规范
  - 2.流程开发
  - - 2.1 蓝湖/摹客协作平台
    - 2.2 适配方案
    - 2.3 初始化文件
    - 2.4 布局模块
    - 2.5 swiper 插件使用
    - 2.6 上传码云并发布部署静态网站
- 十六、**移动端WEB开发之响应式布局**
- - **1. 响应式开发**
  - - **1.1 响应式开发原理**
    - **1.2 响应式布局容器**
    - **1.3 响应式导航**
  - **2.Bootstrap前端开发框架**
  - - **2.1 Bootstrap 简介**
    - **2.2 Bootstrap 使用**
    - **2.3 布局容器**
  - **3. Bootstrap 栅格系统**
  - - **3.1 栅格系统简介**
    - **3.2 栅格选项参数**
    - **3.3 列嵌套**
    - **3.4 列偏移**
    - **3.5 列排序**
    - **3.6 响应式工具**
    - 3.7 其他
- 十七、阿里百秀首页案例
- - - - **技术选型**
      - **需求分析**
      - **1.页面布局分析**
        **2. 屏幕划分分析**
      - **页面制作**
- 十八、vw/vh移动端布局
- - 1.移动端布局
  - 2.vw/vh是什么
  - 3.vw/vh怎么用
  - 4.vw 注意事项
- 十九、案例实战-bibi官网首页头部
- - - - bibi官网移动端首页布局
- 二十、移动端布局总结
- - - **移动端主流方案**
    - - 1.单独制作移动端页面（主流）
        2.响应式页面兼容移动端（其次）
    - **移动端技术选型**

移动端

一、移动端基础

1 .浏览器现状

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。

2 .手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。
Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。
近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。

3.常见移动端屏幕尺寸

注：作为前端开发，不建议大家去纠结dp，dpi，pt，ppi等单位。

4.移动端调试方法

Chrome DevTools（谷歌浏览器）的模拟手机调试
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接IP或域名访问

5.总结

移动端浏览器我们主要对webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
学会用谷歌浏览器模拟手机界面以及调试

二、视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

1.布局视口 `layout viewport`

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

2.视觉视口`visual viewport`

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

3.理想视口 `ideal viewport`

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

4.meta视口标签

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


<!-- 
标准的viewport设置
    视口宽度和设备保持一致
    视口的默认缩放比例1.0
    不允许用户自行缩放
    最大允许的缩放比例1.0
    最小允许的缩放比例1.0 
-->

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

三、二倍图

1.物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334
我们开发时候的1px 不是一定等于1个物理像素的
PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
PC端和早前的手机屏幕 / 普通手机屏幕: 1CSS像素 = 1 物理像素的
Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

2.多倍图

对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
通常使用二倍图，因为iPhone 6\7\8 的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求
背景图片注意缩放问题

 /* 在 iphone8 下面 */
 img{
 /*原始图片100*100px*/
 width: 50px;
 height: 50px;
 } 
.box{
 /*原始图片100*100px*/
 background-size: 50px 50px;
 }

3.背景缩放 background-size

background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;

单位：长度|百分比|cover|contain;
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

4.多倍图切图 cutterman

四、移动端开发选择

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

通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
京东商城手机版
淘宝触屏版

苏宁易购手机版

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

三星手机官网：通过判断屏幕宽度来改变样式，以适应不同终端。
**缺点：**制作麻烦，需要花很大精力去调兼容性问题

五、移动端技术解决方案

1 移动端浏览器

移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。
我们可以放心使用 H5 标签和 CSS3 样式。
同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

2.`CSS`初始化 `normalize.css`

移动端 CSS 初始化推荐使用 normalize.css/

Normalize.css：保护了有价值的默认值
Normalize.css：修复了浏览器的bug
Normalize.css：是模块化的
Normalize.css：拥有详细的文档

官网地址： http://necolas.github.io/normalize.css/

/*! normalize.css v8.0.1 | MIT License | github/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.修正所有浏览器中的行高
 * 2. Prevent adjustments of font size after orientation changes in iOS.防止在iOS中改变方向后调整字体大小。
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.在所有浏览器中删除边距。
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.在IE中始终渲染“主”元素。
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari.
在Chrome, Firefox和Safari中，在“section”和“article”上下文中的“h1”元素的字体大小和空白
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox. 1. 在Firefox中添加正确的框大小。
 * 2. Show the overflow in Edge and IE.    2. 在Edge和IE中显示溢出。
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.修正所有浏览器中字体大小的继承和缩放。
 * 2. Correct the odd `em` font sizing in all browsers. 纠正所有浏览器中奇怪的' em '字体大小。
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.移除IE 10中活动链接的灰色背景。
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-  删除底部边界在Chrome浏览器
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.在Chrome、Edge、IE、Opera和Safari中添加正确的文本装饰
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.在Chrome、Edge和Safari中添加正确的字体粗细
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.修正所有浏览器中字体大小的继承和缩放。
 * 2. Correct the odd `em` font sizing in all browsers.纠正所有浏览器中奇怪的' em '字体大小
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.在所有浏览器中添加正确的字体大小。
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in all browsers.
	*防止' sub '和' sup '元素影响所有浏览器中的行高。 
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.在IE 10中删除链接内图像的边框。
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers. 更改所有浏览器中的字体样式。
 * 2. Remove the margin in Firefox and Safari. 删除Firefox和Safari中的空白。
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE. IE显示溢出。
 * 1. Show the overflow in Edge.在边缘显示溢出。
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.在Edge、Firefox和IE中移除文本转换的继承。
 * 1. Remove the inheritance of text transform in Firefox.在Firefox中删除文本转换的继承。
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.修正了在iOS和Safari中无法样式化可点击类型的问题。
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.删除Firefox中的内边框和填充。
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.恢复先前规则未设置的焦点样式。
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.修正边缘和IE中的文本包装。
 * 2. Correct the color inheritance from `fieldset` elements in IE.修正了IE中' fieldset '元素的颜色继承。
 * 3. Remove the padding so developers are not caught out when they zero out`fieldset` elements in all browsers.
去掉填充，这样当开发者在所有浏览器中归零“fieldset”元素时就不会被发现。
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.在Chrome、Firefox和Opera中添加正确的垂直对齐
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.：删除IE 10+中默认的垂直滚动条。
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.1. 在IE 10中添加正确的框大小。
 * 2. Remove the padding in IE 10.2. 移除IE 10中的填充。
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.修正了Chrome中递增和递减按钮的光标样式。
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.修正Chrome和Safari中奇怪的外观。
 * 2. Correct the outline style in Safari.修正Safari中的轮廓样式
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.在macOS上移除Chrome和Safari的内填充。
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.修正了在iOS和Safari中无法样式化可点击类型的问题。
 * 2. Change font properties to `inherit` in Safari.在Safari中更改字体属性为“inherit”。
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.在Edge、IE 10+和Firefox中添加正确的显示。
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.在所有浏览器中添加正确的显示。
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.在ie10 +中添加正确的显示。
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.在ie10中添加正确的显示。
 */

[hidden] {
  display: none;
}

3 CSS3 盒子模型box-sizing

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
`CSS3盒子模型：盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding

也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了

4.特殊样式

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

六、移动端常见布局

移动端技术选型

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

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

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

媒体查询
bootstarp

七、移动端开发之流式布局

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式
max-width 最大宽度（max-height 最大高度）
min-width 最小宽度（min-height 最小高度）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }
        
        section div {
            /* float: left; */
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: pink;
        }
        
        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

</html>

八、京东移动端首页制作

1.技术选型

方案：我们采取单独制作移动页面方案
技术：布局采取流式布局

2. 搭建相关文件夹结构

3.设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <link rel="stylesheet" href="css/normalize.css">
 <link rel="stylesheet" href="css/index.css">

4. 常用初始化样式

body {
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
}

/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

a {
    color: #666;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    vertical-align: middle;
}

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.clearfix:after {
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

项目下载

九、移动WEB开发之flex布局

1.flex布局体验

1.1 传统布局与flex布局

传统布局

兼容性好
布局繁琐
局限性，不能再移动端很好的布局

flex 弹性布局

操作方便，布局极为简单，移动端应用很广泛
PC 端浏览器支持情况较差
IE 11或更低版本，不支持或仅部分支持

建议：

如果是PC端页面布局，我们还是传统布局。
如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

1.2 初体验

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }

        div span {
            /* width: 150px; */
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            flex: 1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

2. flex布局原理

1 布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局

当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

体验中 div 就是 flex父容器。
体验中 span 就是子容器 flex项目
子容器可以横向排列也可以纵向排列

总结flex布局原理：

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-85Ph4D1E-1647853059074)(C:/Users/lightofd/AppData/Roaming/Typora/typora-user-images/image-20220319090424025.png)]

3.常见父项属性

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-rap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面

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

注意：主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

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

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

注意：使用这个属性之前一定要确定好主轴是哪个

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

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

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的

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

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

该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项（单行）的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值）使用stretch子盒子不要给侧轴长度，

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

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
|属性值 |说明|
|–|–|
|flex-start |默认值在侧轴的头部开始排列|
|flex-end |在侧轴的尾部开始排列|
|center |在侧轴中间显示|
|space-around| 子项在侧轴平分剩余空间|
|space-between |子项在侧轴先分布在两头，再平分剩余空间|
|stretch |设置子项元素高度（侧轴长度）平分父元素高度|

6)flex-flow

flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-flow: column wrap;

4.flex布局子项常见属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

1).flex

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
参与分配盒子其长度失效，被计入到剩余空间内

.item {
 	flex: <number>; /* default 0 */ 
 }

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

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

span:nth-child(2) {
     /* 设置自己在侧轴上的排列方式 */
     align-self: flex-end;
 }

3). order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

.item {
	order: <number>;
}

十、携程网首页案例制作

1. 技术选型

方案：我们采取单独制作移动页面方案
技术：布局采取flex布局

2. 搭建相关文件夹结构

3. 设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <link rel="stylesheet" href="css/normalize.css">
 <link rel="stylesheet" href="css/index.css">

… 与京东移动端首页制作类似

4.常用初始化样式

body {
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background-color: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
    outline: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

a {
    color: #000;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    vertical-align: middle;
}

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.clearfix:after {
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

5. 常见模块命名

6.常见flex布局思路

项目下载

十一、背景线性渐变

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);

背景渐变必须添加浏览器私有前缀

起始方向可以是：方位名词或者度数，如果省略默认就是 top

十二、移动WEB开发之rem适配布局

1.rem 基础

rem 单位

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小
rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

/* 根html 为 12px */
html {
	font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */ 
div {
	font-size: 2rem;
}

2.媒体查询

1)什么是媒体查询

媒体查询（Media Query）是CSS3新语法。

使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

2)语法规范

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

用 @media 开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

mediatype 查询类型

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

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

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

注意他们要加小括号包含

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

3)案例

媒体查询修改背景颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
        /* 2. 小于540px 页面的背景颜色变为蓝色 */

        @media screen and (min-width: 0px) {
            body {
                background-color: blue;
            }
        }

        /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */

        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }

        /* 4. 大于等于970 我们页面的颜色改为 红色 */

        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }

        /* 5. screen 还有 and 必须带上不能省略的 */
        /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
    </style>
</head>

<body>

</body>

</html>

4)媒体查询+rem实现元素变化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* html {
            font-size: 100px;
        } */
        /* 从小到大的顺序 */

        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }

        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }

        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="top">购物车</div>
</body>

</html>

5) 引入资源（理解）

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。
原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

示例

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

<!--我感觉不需要就不引入 ，--> 
    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)and (max-width: 639px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

3.less

1)维护 css 的弊端

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

CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

2)Less 介绍

Less （Leaner Style Sheets 的缩写）是一门 CSS 扩展语言，也成为CSS预处理器。
做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为CSS加入程序式语言的特性。
它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。
Less中文网址： http://lesscss/
常见的CSS预处理器：Sass、Less、Stylus

Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性。

3)Less 安装（注意如果使用vscode无需安装less）

安装nodejs，可选择版本(8.0)，网址：http://nodejs/download/
检查是否安装成功，使用cmd命令（win10 是 window +r 打开运行输入cmd） — 输入node –v查看版本即可
基于nodejs在线安装Less，使用cmd命令“ npm install -g less ”即可
检查是否安装成功，使用cmd命令lessc -v 查看版本即可

4)Less使用

我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句

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

5) Less 变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

@变量名:值;

1. 变量命名规范

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

2.变量使用规范

//直接使用
body{
	color:@color;
}
a:hover{
	color:@color;
}

6)Less编译

本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。

vocode Less 插件

Easy LESS 插件用来把less文件编译为css文件
安装完毕插件，重新加载下 vscode。
只要保存一下Less文件，会自动生成CSS文件

7)Less嵌套

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 1. less嵌套 子元素的样式直接写到父元素里面就好了
    a {
        color: red;
        // 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
        &:hover {
            color: blue;
        }
    }
}


//css 写法
#header .logo {
	width: 300px;
}
//转化为Less嵌套
#header {
	.logo {
		width: 300px;
	}
}
//如果遇见 （交集|伪类|伪元素选择器）
//内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；
//如果有 & 符号，它就被解析为父元素自身或父元素的伪类
//& 与选择器之间不要加空格

a:hover{
	color:red;
}
a{
    &:hover{
        color:red;
    }
}

8)Less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算

在less中可以进行加减乘除的运算

一般只有一个数带单位就行

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm

你还可以对颜色进行算术运算：

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

现在除法算式需要加上括号，或./强制运算

9)Less详细学习

Less学习笔记

4.rem适配方案

1）我们适配的目标是什么？

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2）怎么去达到这个目标的

使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配

3）在实际的开发当中使用

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

4）rem 适配方案技术使用（市场主流）

技术方案1

less
媒体查询
rem

技术方案2（推荐）

flexible.js
rem

两种方案现在都存在。方案2 更简单

5） rem + 媒体查询 + less 技术

(1)设计稿常见尺寸宽度

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

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果。现在基本以750为准。

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

假设设计稿是750px
假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
每一份作为html字体大小，这里就是50px
那么在320px设备的时候，字体大小为320/15 就是 21.33px
用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的
比如我们以 750为标准设计稿
一个100*100像素的页面元素在 750屏幕下，就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1
320屏幕下， html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

(3)元素大小取值方法

最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
屏幕宽度/划分的份数就是 html font-size 的大小
或者： 页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @media screen and (min-width: 320px) {
            html {
                font-size: 21.33px;
                /*320/15*/
            }
        }

        @media screen and (min-width: 750px) {
            html {
                font-size: 50px;
                /*750/15*/
            }
        }

        div {
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }

        /* 1. 首先我们选一套标准尺寸 750为准 
        2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
        /* 3. 页面元素的rem值 =  页面元素在 750像素的下px值 / html 里面的文字大小 */
    </style>
</head>

<body>
    <div></div>
</body>

</html>

6）flexible.js+rem技术

手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以里面页面元素rem值：页面元素的px 值 / 75
剩余的，让flexible.js来去算

github地址：https://github/amfe/lib-flexible

十三、苏宁网首页案例制作

(一)rem + 媒体查询 + less 技术制作苏宁移动端首页

1. 技术选型

方案：我们采取单独制作移动页面方案
技术：布局采取rem适配布局（less + rem + 媒体查询）
设计图：本设计图采用 750px 设计尺寸

2. 搭建相关文件夹结构

3. 设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">

4. 设置公共common.less文件

新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
划分的份数我们定为 15等份
因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为 50px，注意这句话写到最上面

// 设置常见的屏幕尺寸 修改里面的html文字大小
a {
    text-decoration: none;
}
// 一定要写到最上面
html {
    font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: (320px / @no);
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: (360px / @no);
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: (375px / @no);
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: (384px / @no);
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: (400px / @no);
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: (414px / @no);
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: (424px / @no);
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: (480px / @no);
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: (540px / @no);
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: (720px / @no);
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: (750px / @no);
    }
}

5. 新建index.less文件

新建index.less 这里面写首页的样式
将刚才设置好的 common.less 引入到index.less里面语法如下：

// 在 index.less 中导入 common.less 文件
@import “common”

生成index.css 引入到 index.html 里面

6. body样式

body {
    min-width: 320px;
    width:15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #F2F2F2;
}

项目下载

(二)flexible.js+rem技术

1. 技术选型

方案：我们采取单独制作移动页面方案
技术：布局采取rem适配布局2（flexible.js + rem）
设计图：本设计图采用 750px 设计尺寸

2. 搭建相关文件夹结构

3. 设置视口标签以及引入初始化样式还有js文件

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

我们页面需要引入这个js文件

<！--在index.html中引入flexible.js这个文件-->
<script src=“js/flexible.js”> </script>

4. body样式

body {
    min-width: 320px;
    width:15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #F2F2F2;
}

项目下载

十四、VSCode px 转换rem 插件cssrem

setting.json 里面添加配置，这里75是上面项目用到的 html font-size

alt+z实现 rem和px的转化

"cssrem.rootFontSize": 75,
/* 这个插件默认的html文字大小 cssroot  16px */

十五、黑马面面布局开发

1.目的

了解移动端页面开发流程
掌握移动端常见布局思路

1.1 技术方案

1. 弹性盒子 + rem + LESS 
4. 最小适配设备为iphone5 320px  最大设配设备为iphone8plus(ipad能正常查看内容即可)

1.2 代码规范

1. 类名语义化,尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线“_” 连接
2. 类名嵌套层次尽量不超过三层
3. 尽量避免直接使用元素选择器
4. 属性书写顺序
   布局定位属性：display / position / float / clear / visibility / overflow
   尺寸属性：width / height / margin / padding / border / background
   文本属性：color / font / text-decoration / text-align / vertical-align
   其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow
5. 避免使用id选择器
6. 避免使用通配符*和!important

1.2 目录规范

项目文件夹：heimamm
	样式文件夹：css
	业务类图片文件夹：images
	样式类图片文件夹： icons
	字体类文件夹： fonts

2.流程开发

2.1 蓝湖/摹客协作平台

UI设计师 psd效果图完成后，会上传到蓝湖//摹客里面，同时会拉前端工程师进入开发
大部分情况下，UI会把图片按照前端设计要求给切好
UI设计师上传蓝湖到或者/摹客（了解）

1. /摹客官网地址： https://www.mockplus/  注册一个账号
2. 下载moke  ps插件 
3. PS 安装/摹客/蓝湖插件
3. 打开PS/摹客/蓝湖插件
4. 上传（需要切图，需要先标注切图）
5. 查看项目
6. 邀请成员进入（分享按钮，链接地址）

前端设计师可以直接/摹客/蓝湖测量取值

2.2 适配方案

flex 布局
百分比布局
rem布局
vw/vh布局
响应式布局
本次案例 flex + rem + + flexible.js + LESS

2.3 初始化文件

引入 normalize.css
less 中初始化body样式
约束范围

@media screen and (min-width: 750px) {
  html {
    font-size: 37.5px !important;
  }
}

2.4 布局模块

头部模块 .header 高度为 80px
nav 模块制作多用 flex

充电学习阴影

box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1)

2.5 swiper 插件使用

官网地址：https://www.swiper/

下载需要的css和js文件 html页面中引入相关文件
官网找到类似案例，复制html结构，css样式 js 语法
根据需求定制修改模块

2.6 上传码云并发布部署静态网站

准备工作：需要下载git软件需要码云注册账号

git 可以把我们的本地网站提交上传到远程仓库（码云 gitee）里面类似以前的 ftp

码云就是远程仓库，类似服务器

码云创建新的仓库。 heimamm
利用git 提交把本地网站提交到码云新建的仓库里面
- 在网站根目录右键-- Git Bash Here
- 如果是第一次利用git提交，请配置好全局选项
```
git config --global user.name "用户名"
git config --global user.email "你的邮箱地址"
```
- 初始化仓库
```
git init
```
- 把本地文件放到暂存区
```
git add .
```
- 把本地文件放到本地仓库里面
```
git commit -m '提交黑马面面网站'
```
- 链接远程仓库
```
git remote add origin 你新建的仓库地址
```
- 把本地仓库的文件推送到远程仓库 push
```
git push -u origin master
```
码云部署发布静态网站
- 在当前仓库中，点击 “服务” 菜单
- 选择 Gitee Pages
- 选择 “启动” 按钮
- 稍等之后，会拿到地址，就可以利用这个地址来预览网页了

当然你也可以利用草料二维码生成二维码 https://cli.im/

项目下载

十六、移动端WEB开发之响应式布局

1. 响应式开发

1.1 响应式开发原理

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

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

1.2 响应式布局容器

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

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

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

但是我们也可以根据实际情况自己定义划分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
        
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
        }
        /* 2. 小屏幕下  大于等于768  布局容器改为 750px */
        
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
            }
        }
        /* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
        
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
            }
        }
        /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
        
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>

<body>
    <!-- 响应式开发里面，首先需要一个布局容器 -->
    <div class="container"></div>
</body>

</html>

1.3 响应式导航

需求分析

当我们屏幕大于等于768像素，我们给nav宽度为768px，因为里面子盒子需要浮动，所以nav需要清除浮动。
nav里面包含8个小li 盒子，每个盒子的宽度定为 93.75px，高度为 30px，浮动一行显示。
当我们屏幕缩放，宽度小于800像素的时候， nav盒子宽度修改为 100% 宽度。
nav里面的8个小li，宽度修改为 33.33%，这样一行就只能显示3个小li ，剩余下行显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .container {
            width: 750px;
            margin: 0 auto;
        }

        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }

        @media screen and (max-width: 767.5px) {
            .container {
                width: 100%;
            }

            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>

</html>

2.Bootstrap前端开发框架

2.1 Bootstrap 简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

中文官网：http://www.bootcss/
官网：http://getbootstrap/
推荐使用：https://v3.bootcss/ Bootstrap中文文档

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

1. 优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

2. 版本

2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。
3.x.x：目前使用最多,稳定,但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移
动设备优先的 WEB 项目。
4.x.x ：最新版，目前还不是很流行

2.2 Bootstrap 使用

这里只考虑使用它的样式库
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
Bootstrap 使用四步曲：
1. 创建文件夹结构
2. 创建 html 骨架结构
3. 引入相关样式文件
4. 书写内容

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap</title>
    <!--html5shiv 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
    <!--Respond.js解决ie9以下浏览器对 css3 Media Query 的不识别 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    
    <!-- Bootstrap 核心样式-->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>

<body>
    <h1>你好，世界！</h1>
</body>

</html>

<!-- 
书写内容
 直接拿Bootstrap 预先定义好的样式来使用
 修改Bootstrap 原来的样式，注意权重问题
 学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
-->

2.3 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类。

1. container 类

响应式布局的容器固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 (>=768px) 宽度定为 750px
超小屏 (100%)

2. container-fluid 类

流式布局容器百分百宽度
占据全部视口（viewport）的容器。
适合单独做移动端开发

3. Bootstrap 栅格系统

3.1 栅格系统简介

栅格系统英文为“grid systems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
Bootstrap里面的container 宽度是固定的，但是在不同屏幕下，container的宽度不同，我们再把container 划分为12等份

3.2 栅格选项参数

栅格系统用于通过一系列的行（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~12 等份
行（row）可以去除父容器作用15px的边距, 高度和父元素一样高
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class="col-md-4 col-sm-6
若只有.col-xs- 那么所有类型按这个列划分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"] {
            border: 1px solid #ccc;
        }
        
        .row:nth-child(1) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        <!-- 如果孩子的份数相加等于12 则孩子能占满整个 的container 的宽度 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 如果孩子的份数相加 小于 12 则会？ 则占不满整个container 的宽度 会有空白 -->
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 如果孩子的份数相加 大于 12 则会？多于的那一列会 另起一行显示  -->

        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>


    </div>
</body>

</html>

3.3 列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm- 元素到已经存在的 .col-sm- 元素内

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
            /* margin: 0 10px; */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 -->
                <div class="row">
                    <div class="col-md-4">a</div>
                    <div class="col-md-8">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>

</html>

3.4 列偏移

使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">左侧</div>
            <!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>
        <div class="row">
            <!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>

    </div>
</body>

</html>

3.5 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>
</body>

</html>

3.6 响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
|类名 |超小屏 |小屏 |中屏| 大屏|
|-|-|-|-|-|
|.hidden-xs| 隐藏 |可见 |可见 |可见|
|.hidden-sm| 可见 |隐藏 |可见 |可见|
|.hidden-md| 可见 |可见 |隐藏 |可见|
|.hidden-lg |可见 |可见 |可见 |隐藏|

与之相反的，是visible-xs等，只有在特定宽度显示某个内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 300px;
            background-color: purple;
        }
        
        .row div:nth-child(3) {
            background-color: pink;
        }
        
        span {
            font-size: 50px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md hidden-xs">我会变魔术哦</div>
            <div class="col-xs-3">4</div>
        </div>

    </div>
</body>

</html>

3.7 其他

Bootstrap 其他（按钮、表单、表格）请参考Bootstrap 文档

中文官网：http://www.bootcss/
官网：http://getbootstrap/
推荐使用：https://v3.bootcss/ Bootstrap中文文档

十七、阿里百秀首页案例

技术选型

方案：我们采取响应式页面开发方案
技术：bootstrap框架
设计图：本设计图采用 1280px 设计尺寸

需求分析

1.页面布局分析

2. 屏幕划分分析

屏幕缩放发现中屏幕和大屏幕布局是一致的。因此我们列定义为 col-md- 就可以了， md 是大于等于 970 以上的
屏幕缩放发现小屏幕布局发生变化，因此我们需要为小屏幕根据需求改变布局
屏幕缩放发现超小屏幕布局又发生变化，因此我们需要为超小屏幕根据需求改变布局
策略：我们先布局 md以上的 pc端布局，最后根据实际需求在修改小屏幕和超小屏幕的特殊布局样式

页面制作

container 宽度修改

因为本效果图采取 1280的宽度，而Bootstrap 里面 container宽度最大为 1170px，因此我们需要手动改下container宽度

 /* 利用媒体查询修改 container宽度适合效果图宽度 */
 @media (min-width: 1280px) { 
     .container { 
     	width: 1280px; 
     } 
 }

项目下载

十八、vw/vh移动端布局

1.移动端布局

移动端布局—flex布局
为了实现可以适配移动端，页面元素可以宽度和高度等比例缩放
需要移动端适配有如下方案：

2.vw/vh是什么

vw/vh是一个相对单位（类似em和rem相对单位）

vw是：viewport width 视口宽度单位
vh是： viewport height 视口高度单位
相对视口的尺寸计算结果

1vw = 1/100视口宽度
1vh = 1/100视口高度
例如：

当前屏幕视口是 375像素，则 1vw 就是 3.75 像素，如果当前屏幕视口为414，则 1vw 就是4.14像素

vw/vh和百分比有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的

3.vw/vh怎么用

超级简单，元素单位直接使用新单位vw/vh即可。
因为vw/vh 是相对单位，所以不同视口（屏幕）下，宽高一起变化完成适配。

如何还原设计稿？

前提：我们设计稿按照iPhone678 来设计，有个盒子是 50像素*50像素的，如何使用vw呢？
分析：

①：设计稿参照iPhone678，所以视口宽度尺寸是 375像素（像素大厨切换到2x模式）
②：那么1vw是多少像素？
375px / 100 = 3.75px
③：我们元素的目标是多少像素？
50px * 50px
④：那么50*50 是多少个vw？
50 / 3.75 = 13.3333vw

或使用pxcook

4.vw 注意事项

因为设计到大量除法，还是适应LESS 搭配更好点。
我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够用了。vh很少使用。
兼容性：网站： https://caniuse/

十九、案例实战-bibi官网首页头部

需求：实现在不同宽度设备中等比缩放的网页效果
分析：

准备好项目目录以及文件
准备好字体文件（下载别人网站字体）
检查元素 → iconfont样式表 → 复制字体URL到浏览器地址栏 → 回车

准备好less文件
生成的css文件自动放到css文件下面

准备开始项目内容

bibi官网移动端首页布局

1.头部模块 - suspension-box 悬挂箱子

VSCode 转换 vw 插件

2.m-navbar 模块


// ============== 公用样式  ==================
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  
  body {
    font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
  }
  
  a {
    color: #333;
    text-decoration: none;
  }
  
  img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
  }
  ul {
    list-style: none;
  }
  
  .ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

项目下载

二十、移动端布局总结

移动端主流方案

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

京东商城手机版
淘宝触屏版
苏宁易购手机版
…

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

三星手机官网
…

移动端技术选型

流式布局（百分比布局）
flex 弹性布局（推荐）
rem适配布局（推荐）
响应式布局
vw/vh布局

建议：我们选取一种主要技术选型，其他技术做为辅助，这种混合技术开发

本文标签：布局 HTML css

版权声明：本文标题：html+css移动端布局内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726420509h957441.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

技术交流 – FreeNAS中文网

html+css移动端布局

文章目录

移动端

一、移动端基础

1 .浏览器现状

2 .手机屏幕现状

3.常见移动端屏幕尺寸

4.移动端调试方法

5.总结

二、视口

1.布局视口 layout viewport

2.视觉视口visual viewport

3.理想视口 ideal viewport

4.meta视口标签

三、二倍图

1.物理像素&物理像素比

2.多倍图

3.背景缩放 background-size

4.多倍图切图 cutterman

四、移动端开发选择

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

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

五、移动端技术解决方案

1 移动端浏览器

2.CSS初始化 **normalize.css**

3 CSS3 盒子模型box-sizing

4.特殊样式

六、移动端常见布局

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

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

七、移动端开发之流式布局

八、京东移动端首页制作

1.技术选型

2. 搭建相关文件夹结构

4. 常用初始化样式

九、移动WEB开发之flex布局

1.flex布局体验

1.1 传统布局与flex布局

1.2 初体验

2. flex布局原理

1 布局原理

3.常见父项属性

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

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

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

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

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

6)flex-flow

4.flex布局子项常见属性

1).flex

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

3). order 属性定义项目的排列顺序

十、携程网首页案例制作

1. 技术选型

2. 搭建相关文件夹结构

3. 设置视口标签以及引入初始化样式

4.常用初始化样式

5. 常见模块命名

6.常见flex布局思路

十一、背景线性渐变

十二、移动WEB开发之rem适配布局

1.rem 基础

2.媒体查询

1)什么是媒体查询

2)语法规范

mediatype 查询类型

关键字

媒体特性

3)案例

媒体查询修改背景颜色

4)媒体查询+rem实现元素变化

5) 引入资源（理解）

3.less

1)维护 css 的弊端

2)Less 介绍

3)Less 安装（注意如果使用vscode无需安装less）

4)Less使用

5) Less 变量

6)Less编译

1.布局视口 `layout viewport`

2.视觉视口`visual viewport`

3.理想视口 `ideal viewport`

2.`CSS`初始化 `normalize.css`

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