文章目录
- 移动端
- 一、移动端基础
- 二、视口
- 三、二倍图
- 四、移动端开发选择
- 五、移动端技术解决方案
- 六、移动端常见布局
- 七、移动端开发之流式布局
- 八、京东移动端首页制作
- 九、**移动WEB开发之flex布局**
- 十、携程网首页案例制作
- 十一、背景线性渐变
- 十二、**移动WEB开发之rem适配布局**
- 十三、苏宁网首页案例制作
- 十四、VSCode px 转换rem 插件cssrem
- 十五、黑马面面布局开发
- 十六、**移动端WEB开发之响应式布局**
- 十七、阿里百秀首页案例
- 十八、vw/vh移动端布局
- 十九、案例实战-bibi官网首页头部
- 二十、移动端布局总结
移动端
一、移动端基础
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或更低版本，不支持或仅部分支持
建议：
-
如果是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 | 用于所有设备 |
| 用于打印机和打印预览 | |
| 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详细学习
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.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文件
- 新建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.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 布局模块
-
头部模块 .header 高度为 80px
-
nav 模块制作 多用 flex
-
充电学习 阴影
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
码云 就是远程仓库， 类似服务器
-
码云创建新的仓库。 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.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 使用四步曲：
- 创建文件夹结构
- 创建 html 骨架结构
- 引入相关样式文件
- 书写内容
<!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官网首页头部
需求：实现在不同宽度设备中等比缩放的网页效果
分析：
- 准备好项目目录以及文件
准备好字体文件（下载别人网站字体）
检查元素 → 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布局
建议： 我们选取一种主要技术选型， 其他技术做为辅助，这种混合技术开发
894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
