[toc]
移动端基础
视口
二倍图
开发尺寸显示在开发者工具中，我们开发网页根据这个就好了
开发尺寸 * 物理像素比 = 分辨率 所以一个px可能由多个（dpr）物理像素组成
图片缩放使用的属性：
cutterman插件可以直接切出多倍图
开发选择
单独设计和响应式
肯定更喜欢单独。。。
技术解决方案
重温一下。。。。。。。
传统的叫做box-sizing : content-box;
还有一些以后可以积累！！！
常见布局
所以需要提前了解想去的公司采用怎样的方案。。。
pink老师会依次介绍哟！(＾Ｕ＾)ノ~ＹＯ
流式布局
流式布局主要看的是宽度，高度不管。。。高度好像都是px
但是拉伸的时候也会影响到内部内容，所以必须加以限制！
可以用max/min - width/height 来辅助实现
京东案例
懒得做了。。。记笔记吧
准备
方案：单独制作页面
技术选型：流式布局
文件布局： css images upload js index.html
准备：设置视口标签，引入css移动端初始化，引入自己的css文件。。。
body
因为竖直下来每个盒子基本都是百分百宽度
**所以可以直接给body一个宽度100%**，而子盒子都能继承
但是一味地放大缩小会拉伸的很丑！所以指定宽度限制！然后居中对齐
顶栏展示
京东做法
但是高度设置的是固定的45px，这个应该是总结和调试出来的
用一个ul代表这一长条，里面有4个小li，好像特别喜欢用列表
不过这样确实满足“语义化” 这是个顶栏列表，里面包含了若干元素
他那个小叉和图片竟然是固定尺寸的！记得verticle-align : center;
然后这个不用a，到时候用js来做跳转特效就好了。。。果然结构和功能也要分离
宽度改变时，中间变短，俩边不变的效果
直接先做好两边的，用绝对定位和固定尺寸分别固定到这个长条盒子的两侧
然后中间放的是没有宽度（使其铺满）的标准流，然后指定左右margin，略大于两侧盒子的宽度即可
然后使其居中，通过加上边距，但这样会导致外边距合并，加overflow:hidden解决
ps：在div里面有子元素div1时，若父元素div在没有设置overflow:hidden或者是border属性，则父元素div的margin-top的值为父元素div和子元素div1中的margin-top的最大值。
列表栏和登陆栏写法：
search栏：
子元素均采用定位效果实现
京东图标后面的小竖线：
记得after和before是作为子元素，所以这里加个position:absolute定位
再调定位到合适的位置呗
应该用一个盒子包起来，然后设置fixed属性！不过记得同样设置宽度的限制范围哦
小放大镜是二倍精灵图
错误做法：亮出精灵图相应图标的位置，直接用那个位置，然后缩放
这样是错误的，因为缩放是对整个图片进行缩放的，所以坐标也会发生变化
应该把坐标换为原来的n分之一，然后把图片缩放,background-size:
主体内容部分是导航栏以下的所有内容的一个大盒子
包含了焦点图和商品啊，分类啊巴拉巴拉的
这些展示图，更新频率高的，记得放在upload文件夹里而不是images里面哟
竟然是三张图片分别放在3个盒子。。。。我以为背景一张图片，三个透明盒子。。。
ps：可以改成bottom/top/middle来改掉图片和边框间的空白缝隙，或者改成块元素
在设置图片边框样式中，图片或者表单等行内元素，这样会造成一个问题，就是图片底侧以及图片与图片之间会有一个空白缝隙。原因是行内元素之间的回车符系统默认为一个空格，占据了一定宽度。
导航栏
超链接里面放了一个图片和一个文字描述罢了。。复制20次
还有一些字体要用rem处理等巴拉巴拉。。
Flex布局
布局原理
pink说flex布局比浮动布局好
因为flex有与浮动类似的性质，而且更好，所以float clear失效
因为flex自带垂直居中的方法，所以vertical-align熟悉失效
*父级属性
display:flex
flex-direction
默认主轴是x轴（row）
justify-content
注意space-around是每个盒子的两边的外边距都一样
flex-wrap
默认会自动缩小元素在排列方向的长度（水平则缩小宽度）
align-items
stretch会拉到和父亲一个尺寸，当然隔着一个margin，如果设置了相应方向的尺寸，则失效
align-content
为啥要搞出俩属性。。。
flex-flow
还有一些其他的属性，以后得补补
子项属性
flex
默认是0，分配剩余空间，所以不加宽度再设为1就可以占满剩下的所有
卧槽牛逼啊，横的竖的组合起来不是无敌了！顶多加个啥边距
无敌何须多言？？？！！！
align-self属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。
这货的属性蛮多的。。不知道有啥用
order
挺不错的欸，这个order
携程网案例
仍然懒得做。。记笔记吧
初始化
overflow-x:hidden 不出现水平滚动条
还是技术选型。。。flex，好无聊，高度还是定死的，巧用flex一下就完了
固定在上方的导航栏
要兼容的话，在transform前加上一句-webkit-transform : translateX(-50%);
里面一个搜索框一个头像，给头像（右）加个宽度，搜索框不加宽度，用flex:1，tql吧！！
这边突然有个坑，CSS3模型，如果有边框，那么行高=高来垂直居中会偏下，必须行高=内容区域
图+文字结构
上面一个span背景设成2倍精灵图，下面一个span里面写字，然后整个放进a里面
flex-direction: column
align-items : center
渐变
好像支持不太好，注意格式哟
subnav
卧槽，flex的指可以是百分比，按照父亲的给
虽然flex为主，但是也可以搭配其他的做
这边用了传统布局，h2标签是为了SEO优化。。。
传统布局有时候一些盒子最好不用设置宽度，而是用内容+padding挤开，比如：
rem适配布局
非常重要！
媒体查询
screen….
tips：
如果判断最小值，应该从小到大写（pink推荐。。），如果判断最大值，应该从大到小写
min-width 和 max-width 是自带等于号的！and两边要留下空格。数字后必须跟单位
媒体查询并没有增加权重，所以如果特殊的是媒体查询的，要放在后面覆盖
@media screen and (min-width:540px) and (max-width:969px) 在540和970分界
引入资源
适配方案
方案1
但是注意页面元素的px值和页面一开始设置的px值是统一标准下的（美工图里的标准👇）
苏宁案例
别忘了写最常见的（默认大小，兜底）：
这是引入样式的另一种思路，但其实都差不多感觉
body
因为没有手机是小于320px的，宽度直接设为你分的份数就好了
而在750px宽的设计图下，html大小可以直接给个变量50就好了
导航栏基本一样。。。再强调一下居中不是auto，fiex下要用left和transform
虽然这里主体是用rem，但是哪个好用用哪个，不要局限死，这里明显flex好用嘛
对于字体大小，美工一般会给可以直接看出大小的效果图。
不过这个搜索框的格式很怪
图片最好是给装图片的框设置大小和方位巴拉巴拉
然后图片长宽 100%
苏宁的导航栏不是用flex
是一堆a，（竟然没用ul和li）每个a里放一张图片和一个span
全都用rem来写，5个a的宽度刚好是一行的宽度
方案2
我就说嘛。那么高的精度，不管分几份好像都没关系
初始化css叫normalize.css
cssrem修改默认html尺寸，按照设计图的样式来。
flexible默认全屏。若要限制最大宽度
@media screen and (min-width: 750px){
html{
font-size : 75px !important;
}
}rem + flexible + less 用的挺好的，再配上cssrem插件
flexible.js划分是按全屏幕的10等份，在移动端需要更改一下
响应式布局
一个网站，所有设备！！！
基础
常见划分尺寸👇，并不是绝对！原来屏幕竟然是定死的！
尺寸稍小是因为两侧流出空白比装不下好看
调整cssrem，在插件的设置栏可以调整默认一html单位的大小
条件注释
由于浏览器版本的不同，对CSS里某些元素的解释也不一样，针对浏览器版本不同而选择不同CSS的代码，
其实我们还可以利用条件注释的方法来达到类似的目的，什么是条件注释，在此简单介绍一下，无非就是一些if判断啦，呵呵，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，下面来介绍一下使用方法吧。
<!--[if XXX]>
这里是正常的html代码
<![endif]–>
这里XXX是一些特定的东东，在此列表几个出来，详细介绍各自的含义：
<!–[if IE]> / 如果浏览器是IE /
<!–[if IE 5]> / 如果浏览器是IE 5 的版本 /
<!–[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!–[if IE 7]> / 如果浏览器是IE 7 的版本 /
上面是几个常用的判断IE浏览器版本的语法，下面再来介绍一下相对比较少用的逻辑判断的参数：
有几个参数：lte，lt，gte，gt及!
各自的详细解释如下：
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
例句:
<!--[if gt IE 5.5]> / 如果IE版本大于5.5 /
<!–[if lte IE 6]> / 如果IE版本小于等于6 /
<!–[if !IE]> / 如果浏览器不是IE /BootStrap
3.xx偏向于移动端和响应式哟！！
在中文文档找到“基础模板”，然后复制，但是基本和vscode一样，多了一个条件注释复制过来
然后引入css样式文件（内置了normalize.css）。。主要通过类来控制，默认border-box
得了解深一些才能自由diy
不用自己再手动写了。。。这到底是好是坏
栅格系统
与rem布局很相似，不过rem是划分屏幕，栅格是划分页面内容（container）
想要更好的使用，得了解这些封装的实质，比如分成12份最终是由百分比实现的
可以多用开发者工具查看网站的最终源码，多去查查文档
卧槽。container可以有很多个，可以单独适用于某些行，挺棒的
行数
行应始终位于容器中。
该行为列提供了一个居住的地方，理想情况下，列的总数为12。它还可以作为包装器使用，因为所有列都向左浮动，当浮动变得怪异时，其他行不会重叠。
行的每边也有15px的负边距。组成该行的div通常会被限制在容器的填充内部，而不是粉红色区域的边缘，但不能超出。15px的负边距将行压到容器顶部15px的填充上方，从而使行基本无效。此外，行确保您其中的所有div都显示在自己的行上，与上一行和下一行分开。
列
列现在具有15px的填充。这种填充意味着列实际上接触行的边缘，由于行具有负边距，而容器具有正的填充，列本身就接触容器的边缘。但是，列上的填充将列内的任何内容推入所需的位置，并且在列之间提供了30px的装订线。切勿在行外使用列，否则将无法使用。
如果份数相加小于12：
占不满整个屏幕，默认左对齐
如果分数相加大于12：
装不开的那些，超出的整体另起一行
通过给同一个盒子添加不同情况下的自定义类名来决定。卧槽，我悟了！
列嵌套
跟flex一样开始套起来了
不要加margin值，因为分列他最后是变成百分比的宽度
这个的边距是一开始栅格划分4个大盒子，每个大盒子里面嵌套一个小盒子搞的（又有默认15px内边距）。
阿里百秀
宏观布局
一个大container装下三大列
然后放缩屏幕观察变化
这个策略很重要！
这个时候有个小问题，美工给的设计图是1280px，但默认最大宽度是1170px
所以就手动修改一下下
有时候需要去掉padding，记得权重，而小心margin带来的影响
字体图标组件，在boostrap选对应的类名加上去，实质是一个before元素
高度不需要太在意，因为不同大小直接换布局，高度是定死的？？？
所以在响应式布局中，也有一些其实是不变的，或者说比起那种rem，它不变的地方很多
每个小的container都得分析四种或更多情况下的新布局哟
久违的清除浮动，可以直接加类 “ clearfix “来实现
卧槽，需要怎样的样式直接去中文文档里的排版里面查，它设定好了许多最通用的样式
然后如果需要改变一些文字样式，可以直接去辅助类 ->上下文选择，，
然后他这些模块不是写死的，比如按钮的类可以加到span上，也有类似的外观
完成了大屏幕的制作，现在针对小屏幕情况修饰一下
根据实际情况选择不同的处理方式，比如有个大图片，不要让它设置成宽度100%，而是设置居中
再小一点的时候就不合适，可以把图片隐藏，换成一个新元素（放了文字的盒子（平时隐藏，小显示））
有两个贼方便的属性：visible-x和hidden-x
大屏幕竖直排列，小屏幕水平排列，很简单！别忘了媒体条件
然后在其中再加上修饰，比如文字变小啊，
小小的修饰一下背景颜色嘿嘿
我们看样式的时候要切换到手机的尺寸检查，不然在pc端随意拖动宽度效果可能有些不一样
小屏幕时把内边距记得也改小一点，不像👆
总结！
感觉rem为主，配合flex确实很好，flex毕竟太规整了些，也可能是我现在接触不多
再见！55个小时，刚好2周学完，谢谢pink老师，带我入了前端的门！
Less基础
怎么风评less 没有 sass好。。。
概览
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。
因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。
- 有关 Less 语言特性的详细文档，请参阅 Less 语言特性 章节
- 有关 Less 内置函数的列表，请参阅 Less 函数手册 章节
- 有关详细的使用说明，请参阅 Less.js 用法 章节
- 有关第三方工具的详细信息，请参阅 工具 章节
Less 到底为 CSS 添加了什么功能？以下就是这些新加功能的概览。
变量
无需多说，看代码一目了然：
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}编译为：
#header {
width: 10px;
height: 20px;
}混合
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。（注意，你也可以使用 #ids 作为 mixin 使用。）
嵌套
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}用 Less 语言我们可以这样书写代码：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。
你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）(伪元素也要这样)：
.clearfix {
display: block;
zoom: 1;
&:after {
content: "";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}@规则嵌套和冒泡
@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}编译为：
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}运算
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位，结果以第一个单位为准。若只有一个单位，以该单位为准无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
@base: 2cm * 3mm; // 结果是 6cm你还可以对颜色进行算术运算：
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355运算符两侧尽量有空格，除法必须用括号括起来！！！！
不过，Less 提供的 色彩函数 更有使用价值。
calc() 特例
Released v3.0.0
为了与 CSS 保持兼容，**calc() 并不对数学表达式进行计算**，但是在嵌套函数中会计算变量和数学公式的值。
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))转义
转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}编译为：
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}注意，从 Less 3.5 开始，可以简写为：
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。
函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。
函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}命名空间和访问符
(不要和 CSS @namespace 或 namespace selectors 混淆了)。
有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发：
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}现在，如果我们希望把 .button 类混合到 #header a 中，我们可以这样做：
#header a {
color: orange;
#bundle.button(); // 还可以书写为 #bundle > .button 形式
}注意：如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间（例如 #bundle()）后面。
映射
从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}输出符合预期：
.button {
color: blue;
border: 1px solid green;
}作用域
Less 中的作用域（scope）与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。因此，下面的 Less 代码示例和上面的代码示例是相同的：
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}注释
块注释和行注释都可以使用：
/* 一个块注释
* style comment! */
@var: red;
// 这一行被注释掉了！
@var: white;导入
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";这里有个巨坑，如果用了导入，要连续保存才能显示
进阶指南
补充
蓝湖/慕客
蓝湖10人免费，慕客100人免费，直接注册账号，下载就自动装好了
卧槽，可以选择图层然后上传，选的图层会单独保留以供下载
可以直接查看一堆参数甚至代码，图片直接下好1，2，3倍，无敌啊
美工会分享项目给开发者
Swiper神器
很有必要好好学一学
直接下载，最新那个，现在到6了（2021.4）解压解压
package -> js/css 复制引入swiper.min.js 和 swiper.min.css
在swiper演示的那里选一个大概样式差不多的，后面可以自己调整
进去后右键查看网页源代码嘿嘿，然后引入需要的文件
把HTML代码插入到需要的位置，再把CSS代码放到合适的位置，接下来开始定制！
为了避免多个轮播图冲突，放在立即执行函数中
然后去查看API，描述了各组件的功能，少了东西可以去别的实例里面弄过来，（比如箭头啥的）这封装的挺好啊
然后去他的css或者html代码里面调那些东西。
我们可以通过查看API来选择我们需要的组件添加，也可以更改一下提供的css样式，毕竟他提供的子项都是盒子，但js逻辑是封装好的，只留下了几个API供调整
记得调一下swiperprivew，调一下显示的个数。。查手册yyds
实例
多轮播图冲突
给上面html的container换类名或者加新的类名
然后给对应的js改类名
提交网站到github
首先建立与远程的链接
然后建立page。。。没了
或者直接用readme.md初始化，然后把文件拽进来。。。
