html+css移动端布局

移动端

一、移动端基础

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.com/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或更低版本，不支持或仅部分支持

建议：

1. 如果是PC端页面布局，我们还是传统布局。

2. 如果是移动端或者不考虑兼容性问题的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.cn/
• 常见的CSS预处理器：Sass、Less、Stylus

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

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

• 安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/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）在实际的开发当中使用

1. 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）

2. 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 大小

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

(3)元素大小取值方法

1. 最后的公式： 页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
2. 屏幕宽度/划分的份数 就是 html font-size 的大小
3. 或者： 页面元素的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.com/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文件

1. 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
2. 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
3. 划分的份数我们定为 15等份
4. 因为我们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文件

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

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

3. 生成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. 了解移动端页面开发流程
2. 掌握移动端常见布局思路

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.cn/  注册一个账号
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 布局模块

1. 头部模块 .header 高度为 80px

2. nav 模块制作 多用 flex

3. 充电学习 阴影

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

2.5 swiper 插件使用

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

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

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

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

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

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

1. 码云创建新的仓库。 heimamm

2. 利用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
     

3. 码云部署发布静态网站

   • 在当前仓库中，点击 “服务” 菜单

   • 选择 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 响应式导航

需求分析

1. 当我们屏幕大于等于768像素，我们给nav宽度为768px，因为里面子盒子需要浮动，所以nav需要清除浮动。
2. nav里面包含8个小li 盒子，每个盒子的宽度定为 93.75px， 高度为 30px，浮动一行显示。
3. 当我们屏幕缩放，宽度小于800像素的时候， nav盒子宽度修改为 100% 宽度。
4. 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.com/
• 官网：http://getbootstrap.com/
• 推荐使用：https://v3.bootcss.com/ 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.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/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.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/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.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/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.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/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.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/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.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/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.com/
• 官网：http://getbootstrap.com/
• 推荐使用：https://v3.bootcss.com/ 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.com/

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

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

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

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

3. 准备开始项目内容

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布局

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