（三）制作移动端网页（Web网页）
Web端：表示能够下载浏览器的所有设备。因此我们最需要也仅需要解决的是元素尺寸适配于所有设备的问题。
1.谷歌模拟器：
在谷歌浏览器中，右击点检查在出现的面板左上角，可看见一个大屏幕+小屏幕的图，点击可进入网页的手机浏览效果展示。
屏幕分辨率（纵横向上的像素点数，单位px）
一块屏幕有两种分辨率：
（1）没有安装操作系统前，屏幕为出产设置时的硬件分辨率（物理分辨率）：
有1920*1080，有1366×768等
（2）安装操作系统后，用户可根据自身需要调整屏幕分辨率（逻辑分辨率）
制作Web网页需要参考逻辑分辨率来制作网页。 在现阶段中设计师通常以iphone6/7/8的375逻辑分辨率为标准
2.视口标签：
作用：规定HTML的尺寸，让HTML的宽度=逻辑分辨率的宽度/设备的宽度。
因手机屏幕尺寸不同，网页宽度均为100%
为使网页宽度和逻辑分辨率尺寸相同，在html文件中通常在head标签中添加视口标签。
在VScode中用！+enter创建好html文件框架后默认就有
3.二倍图
概念：设计稿中每个元素的尺寸的倍数
为防止图片在高分辨率屏幕下模糊失真，当代网页设计师一般给出以iPhone6/7/8为示例的物理分辨率下的二倍图设计稿750px。
而制作Web网页是在375px的逻辑分辨率下制作，那么解决方法是：
注：先检查是不是750px的设计稿，点击图片便可查看
（1）若设计师给出的是pcbox查看的设计稿，则
（2）若为html文件，则
3.适配方案
（1）分类：
a.宽度适配：宽度自适配（在改变手机型号时，宽度自动改变，但高度不变）
用百分比和flex布局时。（制作pc端网页）
b.等比适配：宽高等比缩放（Web端网页需要）
可用rem适配方案或vw适配方案。
(2)rem适配方案
（2.1）介绍：
rem是相对单位，是相对于HTML标签的字号计算结果
1 rem=1 HTML字号大小
使用方式：1.需要先给HTML标签加字号大小，2.使用rem单位书写尺寸
如图会得到一个width:150px; height:120px;的粉色矩形。
（2.2）媒体查询---之后可替换成引入flexible.js文件
为使该矩形在不同的手机中宽高等比适配，则需要用适当的方式规定HTML字号大小：
第一步.媒体查询
作用：媒体查询能够检测视口的宽度，编写差异化的css样式并在相应的模式下使用适当的已编写的css样式。
第二步. 设置字号大小：
在目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。
例：上图中视口宽度是375px，则设置HTML标签字号为37.5px;
用媒体查询的方式给不同视口的屏幕设置不同的HTML字号：
（2.3）引入flexible-js
用媒体查询的方式需要一个个的写，不方便，可用flexible-js 替换。
flexible-js是一个js库。作用：能自动根据不同的视口宽度给网页中的html根节点设置不同的font-size
（2.4）移动适配rem单位尺寸：
基准根字号：不同视口宽度的html字号。（之后可用less变量定义）
以375的逻辑分辨率为例（iPhone6/7/8）
（2.4）Less
简介：css预处理器，文件后缀.less
作用：使css具备逻辑计算能力
使用：在VScode中添加Easy LESS插件，使.less文件自动生成.css文件，在HTML中引入css文件即可。（因现在浏览器不能识别less代码）
（2.5）Less的基础学习
1.注释
（1）单行注释：
语法：//
快捷键：ctrl+/
（2）块注释：
语法：/* */
快捷键：shift+alt+A
2.运算
加减乘直接用写表达式
除法需要加括号或.
推荐括号写法。
注：如果一个表达式中有多个单位，最终css里面以第一个单位为准（只用像图上一样在最后加一个就好）
3.嵌套（已试用，超方便）
作用：快速生成后代选择器。
注意：“&”表示的是当前选择器，代码写在谁的里面就代表谁且不会生成后代选择器。
应用：配合hover伪类或nth-child结构伪类使用。
4.变量（*）
语法：
定义变量：@变量名：数据;
使用变量：css属性：@变量名;
5.导入
作用：将多个less文件导入一个less文件中，方便html文件引入时只用引入一个css文件
语法：@import "文件路径";(如果是less文件可以省略后缀 注意：没有冒号！！)
6.导出
作用：可自定义生成css文件的文件名
写法：在第一行写//out: 存储url
（1）//out: ./CSS文件名 （在当前文件夹下的××.css文件）
(2)新建一个文件夹存放：//out:./文件夹名称/css文件名
7.禁止导出
在less文件的第一行加//out: false
8.总结一下一个html文件在项目准备时可能需要引入的东西：
1.制作pc端网页：
（1）在head标签的title标签下用link标签引入：
css文件，iconfont.css文件（精灵图），favicon.ico文件（搜索导航的网页图标
）
2.制作Web端网页
（1）同上
（2）在body标签中用script标签引入：
flexible.js文件（用于自动调节html字号大小）
JavaScript文件引入要放在body尾部。
原因：看某乎博主得：JavaScript执行会阻塞HTML的渲染, 因此将JavaScript的引入置于<body></body>尾部, 可以使页面先呈现出来, 避免JavaScript的执行导致页面白屏;
（3）在less文件中，将多个文件导入一个可用 import "文件路径"; （导出：//out: 存放路径）
9.在查找pc端网页和Web端网页的不同时的信息综合：
pc---个人计算机，电脑用户，Web端---所有能下载浏览器的设备
pc端关于分辨率的问题：
现阶段主流的显示器分辨率为1920*1080，因此我们通常以这个分辨率为标准
在这个标准之下，为使在所有电脑显示器上看到所有内容，在1920这个宽度中有一个安全区
1200，可以将其看作内容区域（版心区域wrapper）。我在现阶段常见的版心区域是1240。
所以pc端不用像Web端网页制作一样需要元素尺寸需要适配各个设备。
671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
