文章目录
- 01-移动 Web 基础
- 谷歌模拟器
- 屏幕分辨率
- 视口
- 二倍图
- 适配方案
- 02-rem
- 简介
- rem的使用
- 媒体查询
- rem 布局
- flexible.js
- rem 移动适配
- 03-less
- 注释
- 运算
- 嵌套
- 变量
- 导入
- 导出
- 禁止导出
- less在开发中的使用
- 准备工作
- 头部布局
- 04-vw适配方案
- vw和vh基本使用
- vw和vh布局
- vh和vw能不能混用
01-移动 Web 基础
谷歌模拟器
模拟移动设备，方便查看页面效果
屏幕分辨率
分类：
- 物理分辨率：硬件分辨率（出厂设置）（1920*1080）
- 逻辑分辨率：软件 / 驱动设置 缩放125% 1920/125%
结论：制作网页参考 逻辑分辨率
视口
作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口标签：规定HTML的尺寸，让HTML的宽度 = 逻辑分辨率的宽度(或设备的宽度) --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
- width=device-width：视口宽度 = 设备宽度
- initial-scale=1.0：缩放1倍（不缩放）
二倍图
概念：设计稿里面每个元素的尺寸的倍数
作用：防止图片在高分辨率屏幕下模糊失真
现阶段一般参考的设计稿都是iPhone6/7/8，该设备宽度是375px。
二倍图设计稿尺寸是750px。所以需要用像素大厨转为750px/2 即选用(2x)
使用方法：左边像素大厨，右边是html设计稿。
适配方案
-
宽度适配：宽度自适应(PC端) ：**当更换不同型号手机，屏幕的宽度会等比例缩放，但是屏幕高度还是原来的高度，高度不会等比例缩放。**请看宽度适配方案的代码，打开调试换成不同型号的手机注意宽度和高度的大小。
- 百分比布局
- Flex 布局
-
等比适配：宽高等比缩放(客户端)
- rem
- vw
02-rem
简介
rem是个相对单位。
- rem单位，是相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
rem的使用
注意：下面的代码并不能适配任何型号的手机。因为高度宽度都是px像素单位。
<style>* {margin: 0;padding: 0;}/* 1. 给HTML标签加字号 */html {font-size: 30px;}/* 2. 使用rem单位书写尺寸 */.box {/* 盒子高度变为 width: 5*30px; height: 3*30px;*//* 即width: 150px; height: 90px; */width: 5rem;height: 3rem;background-color: pink;}</style><div class="box"></div>
媒体查询
思考：
-
手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号。
答：媒体查询
-
设备宽度不同，HTML标签字号设置多少合适。
答：将网页等分成10份， HTML标签的字号为视口宽度的 1/10。
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
@media (媒体特性) {html {css属性}
}
/* 当视口宽度是375时，网页背景色是绿色 注意不同浏览器iPhone6/7/8的大小可能不一样我的是 width:375.19px 之所以是这样是因为你的电脑设置里面的系统设置的缩放比例不是100%*/
@media (min-width:374px) and (max-width:376px){body {height: 200px;background-color: green;}}
/* 我通过改变上面的最大和最小尺寸得出了结论：我的浏览器的iPhone6/7/8的精确值是375.19px。
@media (width:375.19px){body {height: 200px;background-color: green;}}
*//* 还有一种方法是鼠标方在body身上即可查看宽度。*/
rem 布局
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。
注意下面的案例需要将电脑的系统设置的屏幕缩放比变为100%才能生效。
<style>* {margin: 0;padding: 0;}/* 1. 使用媒体查询，给不同视口的屏幕设置不同的HTML字号 *//* 此案例需要将电脑的系统设置的屏幕缩放比变为100%才能生效 *//* iPhone5/SE 视口宽度320px , 根字号为32px *//* 当视口宽度320px时 , 盒子宽度为5*32px 高度为3*32px */@media (width:320px) {html {font-size: 32px;}}/* iPhone6/7/8 视口宽度375px , 根字号为37.5px *//* 当视口宽度375px时 , 盒子宽度为5*37.5px 高度为3*37.5px */@media (width:375px) {html {font-size: 37.5px;}}/* iPhone6/7/8Plus 视口宽度414px , 根字号为41.4px *//* 当视口宽度414px时 , 盒子宽度为5*41.4px 高度为3*41.4px */@media (width:414px) {html {font-size: 41.4px;}}/* 2. 使用rem单位书写尺寸 */.box {width: 5rem;height: 3rem;background-color: pink;}</style><div class="box"></div>flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
使用了这个js库，不用再去调节你的电脑的缩放比了。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
<style>* {margin: 0;padding: 0;}/* 不再需要媒体查询了，直接引入js库 */.box {width: 5rem;height: 3rem;background-color: pink;}</style><div class="box"></div><script src="./js/flexible.js"></script>
flexible.js库如下，这是个立即执行函数。
(function flexible (window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit () {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))
rem 移动适配
思考：
-
工作中，书写代码的尺寸是要参考设计搞的尺寸，设计稿中是px还是rem?
答：px
-
既然是使用rem，我们如何确定rem的值呢？
如下：rem大小 = px单位数值 / 基准根字号
-
基准根字号: 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）比如我么使用iPhone6/7/8 视口宽度375px 则基准根字号 = 375px/10=37.5px
-
rem单位的尺寸
rem大小 = px单位数值 / 基准根字号
-
比如我们设计稿为 68px 那么iPhone6/7/8 的宽度为 68px/37.5px ≈1.81333rem
<style>/* rem布局 *//* 设计稿盒子大小 68px * 29px *//* 68px/37.5px ≈1.81333rem *//* 29px/37.5px ≈0.77333rem */div {width: 1.813rem;height: 0.773rem;background-color: pink;}</style><div></div><script src="./js/flexible.js"></script>
03-less
为了每次都要计算rem的大小，太麻烦了，我们打算引入less。
Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件
VS Code 插件：Easy LESS。只要我们ctrl+S保存 less文件后自动生成对应的 CSS 文件
注释
- 单行注释
- 语法：// 注释内容
- 快捷键：ctrl + /
- 块注释
- 语法：/* 注释内容 */
- 快捷键： Shift + Alt + A
// 单行注释/* 这是less，当我们ctrl+S保存时，只有块注释转换成css，单行注释不会转换成css这是块注释允许换行
*/
/* 这是块注释允许换行
*/
运算
- 加、减、乘直接书写计算表达式
- 除法需要添加 小括号 或 .
- 表达式存在多个单位以第一个单位为准
.box {// 左边.less文件 后面的注释是生成的.css文件width: 100 + 20px; // width: 120px;width: 100 - 80px; // width: 20px;width: 100 * 2px; // width: 200px;// 除法 / → (计算表达式) 或 ./ → 推荐（）// 注意使用./会有报错，但是仍然可执行。所以推荐使用(), ()不会报错width: 68 / 37.5rem; // width: 68 / 37.5rem;width: (68 / 37.5rem); // width: 1.81333333rem;width: 29 ./ 37.5rem; // width: 0.77333333rem;// 如果表达式有多个单位，最终css里面以第一个单位为准// 这里输出的单位就是pxheight: (29px / 37.5rem); // height: 0.77333333px;
}
嵌套
作用：快速生成后代选择器
提示：用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用
.father {color: red;.son {width: 200px;a {color: green;// & 表示的是当前选择器，代码写到谁的大括号里面就表示谁 → 不会生成后代选择器// 应用：配合hover伪类或nth-child结构伪类使用&:hover {color: blue;}}// a{ &:hover { color: blue;} } 相当于下面的写法。// a:hover {// color: blue;// }}
}
对应的css如下。
.father {color: red;
}
.father .son {width: 200px;
}
.father .son a {color: green;
}
.father .son a:hover {color: blue;
}
变量
概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
- 定义变量：@变量名: 数据;
- 使用变量：CSS属性：@变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {color: @myColor;
}
a {color: @myColor;
}
导入
作用：导入 less 公共样式文件
语法：导入: @import “文件路径”;
提示：
- 如果是 less 文件可以省略后缀
- 注意写完一定一定要加分号; 不然报错
// 这是 index.less 文件
@import './base.less';
@import './common';
导出
写法：在 less 文件的第一行添加 // out: 存储URL
注意：
- 文件夹名称后面添加 /
- 导出的直接就是css文件了。
// 这是 14-less-导出.less 文件
// 注意加了out: 就不在是注释的意思了，而是导出。// 将14-less-导出.less 导出到 和14-less-导出.less文件同级的index.css文件中
// out: ./index.css// 将14-less-导出.less 导出到 和14-less-导出.less文件同级的mycss文件夹下的index.css文件中
// out: ./mycss/index.css
禁止导出
写法：在 less 文件第一行添加: // out: false
// out: false
使用场景：如下图，base.less 和 common.less就不需要生成同名的.css文件，只需要生成index.css就行。因为我们已经将base.less 和 common.less导入到了index.less中了，只需要生成index.css，html页面就可以直接使用了。
less在开发中的使用
准备工作
- 记得设计稿的尺寸调整为 @2x
-
项目目录：将素材里面的assets，iconfont, js, less 复制出来，再去新建index.html并在less新建index.less 写入如下代码
// out: ../css/index.css@import "./base";
- HTML 结构
<link rel="stylesheet" href="./iconfont/iconfont.css">
<!-- 这里的css是less生成的-->
<link rel="stylesheet" href="./css/index.css"><body>......<script src="./js/flexible.js"></script>
</body>
- less 样式
// out: ../css/@import "./base";
头部布局
- HTML 结构
<!-- 头部 -->
<header>1</header>
- less 样式
// 头部
header {display: flex;justify-content: space-between;padding: 0 (15 / @rootSize);height: (44 / @rootSize);background-color: pink;line-height: (44 / @rootSize);
}
04-vw适配方案
vw和vh基本使用
vw和vh是相对单位，相对视口尺寸计算结果
- vw：viewport width（1vw = 1/100视口宽度 ）还是以iPhone6/7/8(375*667)为例: 1vw = 3.75px;
- vh：lviewport height ( 1vh = 1/100视口高度 ) 还是以iPhone6/7/8(375*667)为例: 1vh = 6.67px;
vw和vh布局
vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )
<link rel="stylesheet" href="./demo.css">
<div class="box"></div>
<!-- less -->
.box {width: (68 / 3.75vw);height: (29 / 3.75vw);background-color: pink;
}
vw单位的尺寸 = px 单位数值 / ( 1/100 视口高度 )
<link rel="stylesheet" href="./demo.css">
<div class="box"></div>
<!-- less -->
.box {width: (68 / 6.67vh);height: (29 / 6.67vh);background-color: green;
}
vh和vw能不能混用
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形 。