手摸手带你学移动端WEB开发
时间：2023-07-05 13:36:01 | 来源：网站运营
时间：2023-07-05 13:36:01 来源：网站运营
手摸手带你学移动端WEB开发：
❝ 「好好学习，天天向上」
本文已收录至我的Github仓库**DayDayUP**：github.com/RobodLee/DayDayUP，欢迎Star
ef="https://blog.csdn.net/weixin_43461520/article/details/113785278">⭐⭐⭐⭐⭐转载请注明出处！⭐⭐⭐⭐⭐
链接：https://blog.csdn.net/weixin_43461520/article/details/113785278
⭐⭐⭐⭐⭐**转载请注明出处！**⭐⭐⭐⭐⭐
❞
视口
视口就是浏览器显示页面内容的屏幕区域。视口分为
「布局视口」、
「视觉视口」和
「理想视口」。
布局视口 layout viewport
布局视口是移动设备的浏览器默认设置的一个视口，用于解决早期的PC端页面在手机上显示的问题，一般这个视口默认的分辨率是
「980px」，这种情况下元素显示得都比较小，需要手动缩放网页才能看清。
视觉视口 visual viewport
视觉视口指的是用户
「正在看到」的
「网页的区域」，可以通过缩放去操作视觉视口，但不会影响到布局视口，布局视口仍保持原来的宽度。
理想视口 ideal viewport
前两种视口的阅读体验都不太好，仍然需要手动缩放网页才能将页面内容看清，而理想视口则是最理想的视口尺寸，简单的说就是设备有多宽，布局的视口就有多宽，小米商城京东等网站的手机网页版都是理想视口，我们不需要缩放窗口就可以将页面内容看清。
mate视口标签
<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: 背景图片宽度 背景图片高度;/* 可以只写一个参数，一个参数表示的是宽度，高度省略了，会等比例缩放 */background-size: 背景图片宽度;<br/>/* 参数百分比也是ok的，表示父盒子的百分之多少，同样，百分比也可以指定一个或两个 */background-size: 66% 50%; / background-size: 80%;<br/>/* cover表示背景图片宽度和高度等比例扩展至足够大，完全覆盖背景区域，可能会导致一部分图片内容丢失 */background-size: cover;<br/>/* 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布局，当父盒子被指定为flex布局后，子元素的
「float」、
「clear」和
「vertical-align」属性将失效。采用flex布局的元素被称为
「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 class="father"> <div class="son">11111微信公众号：Robod</div> <div class="son">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 class="box"> <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 class="box"> <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 class="box"> <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 class="box"> <div>Robod111</div> <div>Robod222</div> <div>Robod333</div> </div></body>flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性。
flex-flow: row wrap;flex 布局子项常见属性
flex
flex属性用于分配父盒子剩余的空间，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 class="box"> <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 class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>rem 适配布局
上面这张图是苏宁移动端的首页，可以看到，网页中元素以及文字的大小是根据窗口宽度动态进行调整的，要想实现这种效果，可以使用rem + 媒体查询。
rem 单位
在介绍rem之前，先来介绍一下
「em」，em指的是父元素字体大小，比如div里面有个span，div中的font-size是20px，那么在span中，1em=20px。同样的，
「rem」也是一个相对单位，但是它指的是html根标签的字体大小，比如html标签中font-size为50px，那么在整个html代码里1rem=50px。所以现在我们只需要将所有的文字还有元素宽高的单位修改为rem，就可以通过修改html标签中的文字大小来调整整个页面中所有元素的大小了。
媒体查询（Media Query）
仅有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 class="container"> <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」：github.com/RobodLee/DayDayUP，欢迎Star
ef="https://blog.csdn.net/weixin_43461520/article/details/113785278">⭐⭐⭐⭐⭐转载请注明出处！⭐⭐⭐⭐⭐
链接：https://blog.csdn.net/weixin_43461520/article/details/113785278
⭐⭐⭐⭐⭐**转载请注明出处！**⭐⭐⭐⭐⭐
在线咨询
