1. 分辨率 浏览器中模拟器上显示的分辨率：CSS分辨率（设备的独立像素）。 物理分辨率：设备像素。 设备像素比(dpr) = 物理像素 / CSS像素。 设计稿： css 像素 375？物理像素?750 ，对，（为了更清晰的页面） 设计稿只提供一份 解决方案： 百分比 弹性盒布局 rem布局 - 移动端最常用 2. viewport参考资料：https://juej

协议：两个设备进行数据交换的约定。HTTP协议：超文本(字符/音频/视频/图片)传输协议，基于TCP协议。 1. HTTP 请求报文(图)HTTP 请求数据 - 抓包中核心内容：HTTP 请求报文的原始细节： 2. HTTP 响应报文(图)HTTP 响应数据 - 抓包中的核心内容：HTTP 响应报文的原始细节： 3. HTTP 请求-响应执行流程 发起请求（GET

背景：设备缩放比 window.devicePixelRatio ，比如拿到设计稿是750px，设备缩放比是2.0，那么设备像素设置就应该为 375px。 1. rem等比例缩放 px： 50px，固定像素值 em：相对单位，相对于父元素的字体大小的倍数。width: 2em; rem：相对单位，相对于根元素（html）字体大小的倍数。width: 10rem; 示例： 1234567

1. 概念Grid 网格 含义：将网页划分成一个个网格，可以任意组合不同的风格，作出各种各样的布局 相同：Grid布局 与 Flex 布局都可以指定容器内部多个项目的位置。 不同： Flex 布局是轴线布局，只能指定项目针对轴线的位置，可以看作是一维布局。 Grid 布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。 1.1 容器和项目 容器：一个案例中最

1. CSS 样式使用方式1.1 内联方式标签内，单独对特定标签元素生效，简单，但不能复用。 1<font style="color: red;">这是一行字</font> 1.2 内部方式 在 head 标签中，使用 style 标签 使用选择器选中元素 编写 css 代码 12345678<style type="text/css&

参考资料： 免费在线渐变色配色工具：https://uigradients.com/ 1. 渐变 gradientCSS3渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 渐变效果的元素在放大时看起来效果更好，因为渐变是浏览器生成的。 1.1 线性渐变background: linear-gradient(...) 1background: linear-gradi

1. CSS 样式属性1.1 字体 font-xxx定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。 font 简写属性。作用是把所有针对字体的属性设置在一个声明中。eg：font:oblique 700 30px “黑体”; /* 样式 加粗 大小 风格 */ font-family 设置字体系列。 font-size 设置字体的尺寸。 font-s

布局两栏布局1 效果： 三栏布局-横1 效果： 三栏布局-竖1 效果： 多栏布局1 效果： 多列布局-图片瀑布显示1 效果： 响应式布局1 效果： 自定义网格布局1 效果： 图文混排1 效果： 文字溢出显示省略号1 效果： 二级菜单1 效果： 六图定位展示1 效果： 菜单中的三角形折叠效果1 效果： 精灵图/雪碧图1 效果： 搜索框1 效果： 移动端金刚区1

1. 常见布局方案 固定布局：以像素作为页面基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸。 可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或者浏览器宽度，选择最合适的那套宽度布局。 弹性布局：以百分比作为页面基本单位，可以适应一定范围内的所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。 混合布局：同弹性布局类似，可以

参考资料： 动画库：https://www.dowebok.com/ animatecss动画库效果和使用方法：https://animatecss.node.org.cn/ 同上：https://animate.style/ github地址：https://github.com/animate-css/animate.css css动画库cdn：https://cdnjs.clou