当前位置 博文首页 > Robod丶：手摸手带你学移动端WEB开发
好好学习，天天向上
本文已收录至我的Github仓库DayDayUP：https://www.cnblogs.com/robod/p/github.com/RobodLee/DayDayUP，欢迎Star
?????
转载请注明出处！?????链接：https://blog.csdn.net/weixin_43461520/article/details/113785278
?????转载请注明出处！?????
视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。
布局视口是移动设备的浏览器默认设置的一个视口，用于解决早期的PC端页面在手机上显示的问题，一般这个视口默认的分辨率是980px，这种情况下元素显示得都比较小，需要手动缩放网页才能看清。
视觉视口指的是用户正在看到的网页的区域，可以通过缩放去操作视觉视口，但不会影响到布局视口，布局视口仍保持原来的宽度。
前两种视口的阅读体验都不太好，仍然需要手动缩放网页才能将页面内容看清，而理想视口则是最理想的视口尺寸，简单的说就是设备有多宽，布局的视口就有多宽，小米商城京东等网站的手机网页版都是理想视口，我们不需要缩放窗口就可以将页面内容看清。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
其中，name=“viewport”表示这是一个视口标签，content用于声明某些属性，常用属性有??
| 属性 | 说明 |
|---|---|
| width | 用于设置宽度，device-width |
| initial-scale | 初始化缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes或no（1或0） |
| minimal-ui | 在网页加载是隐藏顶部的地址栏和底部的导航栏 |
物理像素就是所谓的分辨率，比如分辨率是1920*1080的屏幕，那么屏幕横向是1080个物理像素，纵向就是1920个物理像素。但有时候代码中写的是1px，在手机屏幕上显示不一定就是一个物理像素，比如视网膜屏幕，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率。
从上图中可以看出，原本一个像素，在显示的时候却用了两个物理像素，这就是物理像素比（实际显示的物理像素 / 指定的像素大小，上图中物理像素比就是4/2=2）
比如一张50px * 50px的图片，在视网膜屏幕中打开，按照上图中的换算关系，就会变成原来的两倍，也就是100px * 100px，肯定会造成图片模糊。所以要想解决这个问题，可以先准备一张100px * 100px的图片，然后指定宽高为原来的一半，就变成了50px * 50px，在屏幕中显示的时候，又会扩大为之前的两倍，又恢复成了100px * 100px，这样图片就不会模糊了。
img {
width: 50px;
height: 50px;
}
不光是普通的图片可以缩放，背景图片也可以缩放，使用background-size属性就可以将背景图片缩放了。
/* 语法： */
background-size: 背景图片宽度 背景图片高度;
/* 可以只写一个参数，一个参数表示的是宽度，高度省略了，会等比例缩放?? */
background-size: 背景图片宽度;
/* 参数百分比也是ok的，表示父盒子的百分之多少，同样，百分比也可以指定一个或两个?? */
background-size: 66% 50%; / background-size: 80%;
/* cover表示背景图片宽度和高度等比例扩展至足够大，完全覆盖背景区域，可能会导致一部分图片内容丢失?? */
background-size: cover;
/* contain表示宽度和高度进行等比例缩放，当宽度或者高度中的一个占满整个盒子的时候就不再拉伸了?? */
background-size: contain;
看一下cover和contain的区别??
<head>
<style>
div {
width: 300px;
height: 400px;
border: 5px solid red;
background: url(./images/robod.png) no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
流式布局很简单，就是百分比布局，也称非固定像素布局，简单来说就是将盒子的宽度设置成百分比，这样盒子的宽度就会根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
<head>
<style>
div {
width: 80%; /* 将宽度指定为父盒子的80% */
height: 50px; /* 高度还是指定具体的px */
background-color: skyblue;
margin: 0 auto; /* 盒子始终居中对齐 */
}
</style>
</head>
<body>
<div></div>
</body>
flex用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局，当父盒子被指定为flex布局后，子元素的float、clear和vertical-align属性将失效。采用flex布局的元素被称为flex容器，它的所有子元素自动成为容器成员，称为flex项目。
flex 布局就是通过给父盒子添加flex属性，来控制子元素的位置和排列方式
flex-direction（设置主轴的方向）在 flex 布局中，分为主轴和侧轴两个方向，又被称作行和列，x轴和y轴。默认的主轴是x轴，默认的侧轴是y轴。
主轴和侧轴是会变化的，通过flex-direction属性即可设置哪个是主轴以及主轴方向，剩下的就是侧轴，子元素是跟着主轴的方向排列的。
| 属性值 | 说明 |
|---|---|
| row | x轴为主轴，子元素从左向右排列，默认值 |
| row-reverse | x轴为主轴，子元素从右向左排列 |
| column | y轴为主轴，子元素从上到下排列 |
| column-reverse | y轴为主轴，子元素从下到上排列 |
<head>
<style>
.father {
display: flex; /* 使用flex布局 */
width: 500px;
height: 500px;
background-color: tomato;
/* row、row-reverse、column、column-reverse */
flex-direction: column-reverse;
}
.son {
width: 200px;
height: 200px;
margin: 10px;
background-color: skyblue;
}
</style>
</head>
<body>
<div >
<div >11111微信公众号：Robod</div>
<div >22222微信公众号：Robod</div>
</div>
</body>
justify-content（设置主轴上的子元素排列方式）在确定好主轴后，就可以使用justify-content属性去定义子元素在主轴上的对齐方式。
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，从头部开始（如果主轴是x轴，则从左到右） |
| felx-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x轴，则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间 |
<head>
<style>
.box {
width: 500px;
height: 200px;
display: flex;
/* flex-start、flex-end、center、space-around、space-between */
justify-content: flex-start;
background-color: aquamarine;
}
.box div {
width: 100px;
height: 100px;
margin: 10px;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div >
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
flex-wrap（设置子元素是否换行）flex布局中，默认情况下所有的子元素都排在一条线上，如果一条线上塞不下，就会缩减子元素的宽度，强制塞进一条线中，如果想控制是否换行，可以通过flex-wrap属性来设置nowrap(默认值，不换行)，wrap(换行)。
<head>
<style>
.box {
width: 700px;
height: 300px;
display: flex;
flex-wrap: nowrap; /* nowrap、wrap */
background-color: aquamarine;
}
.box div {
width: 300px;
height: 100px;
border: 1px solid red;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div >
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
align-items（设置侧轴上的子元素的排列方式，单行）该属性是控制子项在侧轴上的排列方式，当子元素都在一行(或一列)上的时候使用。
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中（垂直居中） |
| stretch | 拉伸，默认值，子盒子不设置height时，高度和父盒子一致 |
<!-- 现在主轴是x轴，y轴是侧轴-->
<head>
<style>
.box {
width: 400px;
height: 100px;
display: flex;
/* flex-start、flex-end、center、stretch */
align-items: stretch;
background-color: aquamarine;
}
.box div {
width: 100px;
border: 1px solid red;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div >
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
align-content（设置侧轴上的子元素的排列方式，多行）当子元素出现换行的情况时，使用align-content属性设置子元素的对齐方式，在单行情况下没有效果。
| 属性值 | 说明 |
|---|---|
| flex-start | 在侧轴的头部开始排列，默认值 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子元素在侧轴平分剩余空间 |
| space-between | 子元素在侧轴先分布在两头，再平分剩余空间 |
| stretch | 子元素未指定height属性时平分父元素高度 |
<head>
<style>
.box {
width: 150px;
height: 400px;
display: flex;
flex-wrap: wrap; /* 设置子元素换行显示 */
/* flex-start、flex-end、center、space-around、space-between、stretch*/
align-content: stretch;
background-color: aquamarine;
}
.box div {
width: 100px;
/* height: 100px; */
border: 1px solid red;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div >
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
flex-flowflex-flow属性是flex-direction和flex-wrap属性的复合属性。
flex-flow: row wrap;
flexflex属性用于分配父盒子剩余的空间，flex来表示占的份数，也可以写百分比。
<head>
<style>
.box {
display: flex;
width: 100%;
height: 100px;
background-color: skyblue;
}
.box div {
height: 100px;
}
.box div:nth-child(1) {
background-color: red;
flex: 3;
}
.box div:nth-child(2) {
background-color: green;
flex: 1;
}
.box div:nth-child(3) {
background-color: blue;
width: 100px;
}
</style>
</head>
<body>
<div >
<div></div>
<div></div>
<div></div>
</div>
</body>
上面这个例子中，第三个蓝色盒子占了100px，红色和绿色盒子分配剩下的空间，红色的占2/3，绿色的占1/3，而且会根据父盒子宽度的调整去动态调整盒子的宽度。
align-self
这个属性可以用来设置子元素自身在侧轴上的排列方式，默认值为auto，表示继承父元素的align-items属性
order如果想更改两个元素的排列顺序，可以使用order属性，数值越小，排列越靠前，默认为0。
<head>
<style>
.box {
display: flex;
width: 200px;
height: 200px;
background-color: skyblue;
}
.box div {
width: 50px;
height: 50px;
margin: 10px;
background-color: burlywood;
}
.box div:nth-child(2){
align-self: flex-end;
}
.box div:nth-child(3) {
order: -1;
}
</style>
</head>
<body>
<div >
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
上面这张图是苏宁移动端的首页，可以看到，网页中元素以及文字的大小是根据窗口宽度动态进行调整的，要想实现这种效果，可以使用rem + 媒体查询。
在介绍rem之前，先来介绍一下em，em指的是父元素字体大小，比如div里面有个span，div中的font-size是20px，那么在span中，1em=20px。同样的，rem也是一个相对单位，但是它指的是html根标签的字体大小，比如html标签中font-size为50px，那么在整个html代码里1rem=50px。所以现在我们只需要将所有的文字还有元素宽高的单位修改为rem，就可以通过修改html标签中的文字大小来调整整个页面中所有元素的大小了。
仅有rem单位还没办法实现前面提到的效果，现在还需要去实现调整窗口大小的时候html标签中的font-size能够随之变化才可以达到我们想要的效果，通过媒体查询即可实现该功能。媒体查询是CSS3新语法，可以对不同的媒体类型定义不同的样式，语法如下??
@media mediatype and|not|only (media feature) {
CSS样式;
}
其中，mediatype是媒体类型，常用的有all(用于所有设备)，print(用于打印机和打印预览)和screen(用于电脑屏幕，平板电脑，智能手机等)三种。
mediatype后面跟着的就是关键字，同样也有三个，and 指的是可以将多个媒体特性连接到一起，not 是排除某个媒体类型，最后一个only用于指定某个特定的媒体类型。
最后一个用小括号括起来的是媒体特性，根据不同媒体类型的媒体特性设置不同的展示风格，比如width、min-width、max-width等， 还有很多，可以参考菜鸟教程，
<head>
<style>
@media screen and (min-width: 600px) {
html {
font-size: 20px;
background-color: skyblue;
}
}
@media screen and (max-width: 599px) {
html {
background-color:springgreen;
font-size: 10px;
}
}
div {
font-size: 2rem;
}
</style>
</head>
<body>
<div>
微信公众号：Robod
</div>
</body>
上面的例子中，当屏幕宽度小于600px时，1rem=10px，文字大小是2rem=40px，当屏幕宽度为600~800px时，1rem=20px，文字大小就变成了2rem=40px，不过在书写的时候要注意书写的逻辑，不然有可能由于CSS层叠性的问题导致样式不生效。
媒体查询不仅可以实现页面元素的动态变化，还可以实现根据设备尺寸引入不同的css文件，当样式比较多的时候，可以针对不同的媒体使用不同的css文件，语法如下??
<link rel="stylesheet" media="mediatype and|not|only (media fuature)" href="xxx.css">
这样当符合media属性中的条件时，就会引入该CSS文件。
前面几种布局方式都是专门为了为了移动端去制作一个布局文件，而响应式布局可以只需要开发一套即可，它可以兼容不同尺寸的屏幕。
首先响应式布局需要一个父级作为布局容器，用来配合子集元素去实现变化效果，原理就是在不同屏幕下通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下看到不同的页面布局和样式变化。
通常的尺寸划分与宽度设置??
| 设备划分 | 尺寸与宽度设置 |
|---|---|
| 超小屏幕（手机） | <768px；宽度设为100% |
| 小屏设备（平板） | >=768px，<992px；宽度设为750px |
| 中等设备（桌面显示器） | >=992px，<1200px；宽度设为970px |
| 宽屏设备（大桌面显示器） | >=1200px；宽度设为1170px |
<head>
<style>
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
width: 25%;
height: 30px;
background-color: aqua;
list-style: none;
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.container ul li {
width: 50%;
background-color: skyblue;
}
}
</style>
</head>
<body>
<div >
<ul>
<li>微信公众号</li>
<li>Robod</li>
<li>微信公众号</li>
<li>Robod</li>
</ul>
</div>
</body>
在??这个例子中，当窗口宽度大于768px时，让4个 li 浮动在一行显示，每个 li 的宽度为ul的25%，当窗口宽度小于768px时，通过媒体查询修改 li 元素的样式，一行显示两个。所以，响应式布局的优点就在于可以使用一套CSS代码实现不同屏幕下的布局，不过缺点就是会导致整个布局文件比较臃肿。
在某些网站中，可以看到一些渐变色的效果，那么渐变色也是可以通过CSS来实现的。
/* 第一个参数是起始方向，不写默认是top，跟一个表示某一边，两个表示某个角，比如左下角，就写left bottom（中间用空格隔开，不是逗号）;
后面的颜色可以跟多个，中间用逗号隔开 */
background: -webkit-linear-gradient(起始方向, 颜色1, 颜色2...);
需要注意的是，背景渐变的兼容性不是很好，所以必须添加私有前缀。
<head>
<style>
div {
width: 200px;
height: 100px;
background: -webkit-linear-gradient(left bottom,red,green,blue);
}
</style>
</head>
<body>
<div></div>
</body>
现在正好放假了，所以抽空学习了一下移动端的布局开发，然后将看的内容总结成了这一篇文章，整个HTML+CSS的部分到这里也就结束了，接下来就要学习JavaScript了。文中肯定有很多疏漏的地方，欢迎在评论区交流。
明天就大年三十了，祝各位小伙伴们新年快乐！
码字不易，可以的话，给我来个
点赞，收藏，关注如果你喜欢我的文章，欢迎关注微信公众号 『 R o b o d 』
本文已收录至我的Github仓库DayDayUP：https://www.cnblogs.com/robod/p/github.com/RobodLee/DayDayUP，欢迎Star
?????
转载请注明出处！?????链接：https://blog.csdn.net/weixin_43461520/article/details/113785278
?????转载请注明出处！?????
