【coderwhy前端笔记 - 阶段一 HTML+CSS】（三）CSS补充、计算机相关知识

css 移动端相关知识

1　css常见单位

17.1　绝对单位(⭐px)

17.2　相对单位

font-size 的最小值为 12px

em：相对于 自身 font-size，自身未设置font-size时就用从父级继承来的

rem：相对于 html 的 font-size，即html{ font-size: 16px; }

vw（viewport width）视口宽度的1%

vh（viewport height）视口高度的1%

2　像素

Pixel 像素

物理像素：设备的像素，如电脑的分辨率 2880px * 1800px；

逻辑像素：开发用的像素，如：100px*100px。

物理像素 和 逻辑像素 两个不相等

获取逻辑像素方法：JavaScript >> screen.width 和 screen.height

DPR 设备像素
视网膜显示屏，DPR中，一个逻辑像素用中个物理像素进行渲染，成为设备像素比

获取设备像素比：JavaScript >> window.devicePixelRatio

PPI 像素密度

3　媒体查询

针对不同设备需求进行定制化开发的一个接口，可根据设备类型、特性(宽度)来修改页面

18.1　使用方式

方式一：⭐ 通过@import，结合@media条件来使用不同的css规则

<style>
  @import url(文件路径) 媒体查询条件;
  @import url(./css/xx.css)(max-width:600px); /* 小于600时 */
<style>

方式二：使用media属性为<style>，<link>，<source>和其他HTML元素指定特定的媒体类型

<link rel="stylesheet" media="(max-width: 600px)" href="./css/miniScreen.css">

方式三：

@media (max-width: 600px) {
  body {
	background-color: red;
  }
}

方式四：监听模式
使用Window.matchMedia() 和 MediaQueryList.addListener() 方法来测试和监控媒体状态；

18.2　设备(媒体)类型

@media 类型值 { }

类型值：

• all（默认）：所有设备
• print：打印预览模式
• screen：用于屏幕
• speech：用于语音合成器

18.3　媒体特性

具体表现，如max-width: 600px，注意每条特性都需要用 () 括起来

18.4　逻辑运算符

表达式最终会形成一个boolean值，真>>执行，假>>不执行

• and：要同时满足
• not：否定查询条件
• only：仅在整个查询匹配时才用于应用样式。
• ,(逗号)：合并规则

@media   (min-width: 400px) and (max-width: 600px) { }

意为最小400，最大600。400px ~ 600px。(可以等于400和600)

18.5　案例

最右写法满足层叠性，如屏幕大小382px。

最小320px 满足生效 >> 最小375px 满足生效 >> 最小414px 不满足往下走 >> 最小480px 不满足往下走

最后生效的时375px内的函数。

iphone尺寸

4　css预处理器　Less

三种预处理器

Sass/Scss
2007年诞生，受 less 影响，目前已经进化到了全面兼容css的scss

Less ⭐
2009年诞生，使用css语法，开发者更容易上手。简单、便捷、兼容css

Stylus
2010年诞生，主要用来支持 node 项目进行css预处理。语法偏向于python，使用率低

css的扩展语言，并兼容css。

不能在 html 的 style 内编写 less，无法识别生效。

原css文件：后缀名为 .css。less文件：后缀名为.less

19.1　less代码的编译

（需要将less代码转成css代码才能使用）

• 方法一：下载node环境 >> npm >> less 工具，后续可以用 webpack 自动化完成
• 方法二：vscode 部署 less 工具后 ，编写 less 文件时会在 less 文件同目录下自动生成一个 css 文件 ，在 html 引用 css 文件即可 （在线编译链接）
• 方法三：引入 less 文件及转换的 js

<link rel="stylesheet/less" href="xx.less">					 // 注意 /less
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script> //可以复制下来到本地做less.js

19.2　less语法

（1）兼容

兼容css

（2）变量

定义变量：@变量名：变量值；
使用变量：.box { color: 变量名; }

@boxcolor: red;
.box2 {
  color: @boxcolor;
}

（3）嵌套

原：.box{} .box item {}
嵌套方式：

.box {
  .item {
    &:hover {}  
  }  
}
&:hover{} 译为 .box .item:hover {}

👆

（4）运算

可以对任何数字、颜色或变量进行运算（　+　-　*　/　）

另calc( 10% - 10px )✔，calc( 10rem - 10px )❌

在 less 中 .box { height: 100px - 10rem; } 以左边单位为标准

一般 px >> rem 时才使用

（5）混入

基本使用

.box_border {
  border: 1px solid #ccc;
}
.box1 {
 width: 100px;
 .box_border();	
}

传参用法

.boxcolor(@boxColor: red) {
  color: @boxColor;
}
.box2 {
  .boxcolor(#00f);
}

（6）映射

.box-size {
  width: 100px;
  height: 100px;
}
.box3 {
  .box-size()[width];
}

（7）混入 + 映射

.pxToRem(@px){
  result: (@px / @htmlFontSize) * 1rem;
}
.box {
 width: .pxToRem(100)[result];
 font-size: .pxToRem(18)[result];
}

（8）继承

知道就好不用记

（9）less内置函数

看看不记，查询地址

.box {
  color: color(red);  // 将red转成rgb
  width: convert(100px,"in");   // 单位转换为英寸
  font-size: ceil(18.5px); // 数学函数
}

（10）作用域

优先用离自己最近的{ }内的变量，再到自己上一层父级查找

@boxcolor: red;
.box2 {
  @boxcolor: #ff0; ✔
  color: @boxcolor;
}

（11）注释

// 和 /* */

5　移动端

移动端三大类：

• 原生app开发（ios、Android、rn、uniapp、flutter等）
• 小程序开发（原生小程序、uniapp、taro等）
• web页面（移动端web页面）

自适应：根据不同的设备屏幕大小来自动调整尺寸、大小；

响应式：会随着屏幕的实时变动而自动调整，是一种自适应；

5.1　浏览器视口　Viewport

布局视口（layout viewport）
视觉视口（visual layout）
理想视口（ideal layout）


width默认980px

<!-- 移动端视口的宽度 = 设备宽度 -->
简写：meta:vp		宽度=设备宽度	缩放因子1	不让用户缩放		最小缩放1	最大缩放1
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

5.2　移动端适配方案

（1）百分比（难用）

难以统一，非常少用

（2）rem + 动态html-font-size （放弃使用）

步骤总结：

• 根据屏幕宽度，动态设置html的font-size，font-size: 视口宽度 / 10
• 换算成 rem 单位

步骤一：动态 font-size
方法一，媒体查询

方法二，js监听

<script>
	const htmlEl = document.documentElement			// html
	function setRemUnit(){		// 监听事件（ 窗口或框架被重新调整大小，函数(){} ）
		const htmlWidth = htmlEl.clientWidth		// 获取屏幕宽度
		const htmlFontSize = htmlWidth / 10			// 屏幕宽度/10
		htmlEl.style.fontSize = htmlFontSize + "px"	// 设置html的fontsize
	}
	setRemUnit()
	window.addEventListener("resize",setRemUnit)
</script>
<style>
	.box {
		width: 5rem; /* 等于屏幕宽的一半 */
		height:5rem;
		background-color: orange;
	}
</style>

方法三，下载引入别人写好的lib-flexible库

步骤二：换算成 rem 单位

方法一，手动计算

屏幕宽度468px，html 的 font-size = 468px / 10 = 46.8px，则1rem = 46.8px

假设我想写一个 100px*100px 的盒子，100 / 46.8 = 2.13675rem

方法二，less / sass换算

.pxToRem(@px){
  result: (@px / @htmlFontSize) * 1rem;	 // @htmlFontSize 为屏幕尺寸/10
}
.box {
 width: .pxToRem(100)[result]; 	// 设参数为100px，带入result计算
 font-size: .pxToRem(18)[result];
}

三：不需要手动换算，借助webpack的postcss-pxtorem插件

四：编辑器内安装插件
px to rem 的插件，在编写时自动转换，默认按照屏幕宽度750px来配置rem
修改方式：插件 - 设置 - 扩展设置 - root font size

（3）vw方案 ✔

1vw = 视口的1%。

相较于rem方案，vw方案的优势

• 不需要引入js监视视口变化，不需要设置和计算html的font-size
• 不需要因为html设置了font-size，而必须给body再设置一个font-size。防止继承
• 不依赖font-size尺寸，所以不用担心html的font-size尺寸被篡改
• vw 比 rem更加语义化，1vw 是 1/100 的 viewport 的大小
• 可以具备rem之前的所有优点

换算方式：
方法一：手动计算

如屏幕458px，1vw=4.58px

我想设置一个100px的盒子，100px / 4.58px =21.843 vw

方法二：

@vwUnit: 3.75;
.pxToVw(@px) {
  result:(@px / @vwUnit) * 1vw;
}
.box {
  width: .pxToVw(100)[result];
  height: .pxToVw(100)[result];
}

方法三：借助webpack工具完成自动转化

方法四：VSCode插件

6　移动端练习笔记

6.1　head 放点啥

< head> < /head>

<meta charset="utf-8">
<!-- 视口宽度和缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- 站点图片 -->
<link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico" type="image/x-icon">
<!-- 引用less文件 -->
<link rel="stylesheet/less" href="reset.less">	
<!-- 引用less相关的转换js文件 -->
<script src="20less.js" ></script>

6.2　tabbar　底部当行栏

<!-- 底部导航栏 -->
<!-- 一般会留出一点点安全高度 -->
<div class="tabbar">
	<div class="item">
		<img src="kaola_img/tabbar_home_active.png" alt="">
	</div>
	<div class="item">
		<img src="kaola_img/tabbar_category.png" alt="">
	</div>
	<div class="item">
		<img src="kaola_img/tabbar_cart.png" alt="">
	</div>
	<div class="item">
		<img src="kaola_img/tabbar_profile.png" alt="">
	</div>
</div>

.tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	height: calc(env(safe-area-inset-bottom) + 50px);  // 安全高度+导航高度
	border-top: 1px solid #ddd;
	
	.item {
		flex:1;
		text-align: center;
		
		img {
			width: 48px;
		}
	}
}

---

计算机相关知识

1　字符实体

<span></hhhhh</span>

文本中存在 < 等浏览器容易解析错误的字符，建议使用字符实体。
字符实体一般 & 开头，; 结尾
常见的字符实体：

2　URL

• URL的格式
  • 协议://主机:端口/路径/文件名?查询#片段id
    如：http://127.0.0.1:8848/xiangmu/19.html
• 和URI的区别
  • URI 标志符
  • URL 定位符（网络地址），是URI的一部分

3　SEO优化

搜索引擎优化，利于网站推广，搜索后能结果能靠前显示，关键字优化，百度指数，5118关键词，产品一样，但可以通过不同的关键词，信息发布平台，达到曝光，引流。

<head>
<title>标题</title>
<meta name="description" content='为对该网页的简要描述'>
<meta name="keywords" content="网站关键词">
<meta name="anthor" content="作者信息">
<meta name="robots" content="没理解">
</head>
<body>
<h1><a>网站名称</a></h1>  h1背景放logo图片
</body>

4　字符编码

• 计算机一开始是用来解决数字计算问题，后来还可以做文本处理
• 它由0和1两个数字组成的二进制数字
• 计算机的底层硬件实现就是用电路的开和闭两种状态来表示0和1

6　进制

人类：十进制
计算机：二进制、八进制、十六进制

7　颜色表示

• color keywords 颜色关键词
• RGB
  • 十六进制 #aabbcc，简写#abc
  • 函数：rgba(0~255,0 ~ 255, 0 ~ 255, 0 ~ 1)