一、移动适配
移动适配是网页的宽高、高度随着设备的宽度、高度等比变化。有rem、vw/vh两种解决方案。
1、rem适配
rem是一个相对单位，相对于HTML字号而言，1ren=1个HTML字号的大小。因此，使用ren开发移动适配网页时，要先给定HTML的字号，然后在盒子里使用rem单位即可。
A.媒体查询
白龙网发现，媒体查询是根据不同的视口宽度，执行不同的CSS。它是由关键词@media、视口宽度（width:30px）、样式{选择器:{}}等三部分组成。手机屏幕大小不同，分辨率不同，可以使用媒体查询来设置不再HTML字号的大小。
@media (width:414px) {
html {
font-size: 20px;
color: red;
}
}
a.媒体属性
媒体属性可以是固定值，也可以是最大值（小于等于）、最小值（大于等于）。由于CSS层叠的特性，min-width的属性值必须从小到大小；而max-width的属性值必须从大到小写，才能生效。
@media (min-width:230px) {
body {
background-color: skyblue;
}
}
@media (min-width:768px) {
body {
background-color: red;
}
}
@media (min-width:992px) {
body {
background-color: pink;
}
}
@media (min-width:1200px) {
body {
background-color: green;
}
}
</style>
b.完整写法
@media 关键词 屏幕类型 （媒体属性） {样式}。另外，使用alt
关键词是指：and/only/all；
屏幕类型：屏幕，打印，阅读；
媒体属性：width/min-width/max-width、height/min-height/max-height。
c.网页中直接判断视口宽度，为特定网页添加响应效果
<link rel="stylesheet" href="./one.css" media="(min-width:768px)">
<link rel="stylesheet" href="./two.css" media="(min-width:1200px)">
d.指定视口隐藏内容
<style>
.box {
display: flex;
height: 300px;
}
.left {
height: 300px;
width: 200px;
background-color: blue;
}
.right {
flex: 1;
height: 300px;
background-color: red;
}
@media (max-width:768px) {
.left {
display: none;
}
}
</style>
B.根字号
不同的视口，HTML字号是不同的；一般来说，字号是视口宽度的10分之一。媒体查询可以根据不同的视口宽度执行不同的CSS。
然后在盒子中使用rem，即可实现铥适配的效果。
<style>
@media (width:820px) {
html {
font-size: 42.3px;
color: blue;
}
}
@media (width:768px) {
html {
font-size: 41.4px;
color: red;
}
}
@media (width:912px) {
html {
font-size: 91.2px;
color:pink;
}
}
.box
</style>
</head>
<body>
<div class="box">白龙网</div>
</body>
C.视口、根字号、ren之间的关系
视口宽度/10=根字号大小，设计稿目标字号/根字号大小=rem。
flexible.js插件解决了不同视口下显示不同的根字号的事儿，同时也解决了本地电脑不同分辨率对媒体查询的影响。即引导flexible.js插件后，可以直接使用rem开发移动适配的网站。
（2）less
A.含义
less是CSS的预处理器，让CSS具有逻辑性、计算能力，命名规则是*.less。网页无法识别识别我们写的LESS，但是可以识别生成的CSS。因此我们在网页中引入LESS生成的CSS.在vsCode扩展中安装一个easyLess，即可实现上述功能。即：在less中写内容，在css中自动生成内容，把CSS引入网页即可。
B.注释
单行注释是// ，快捷键是ctr+/，多行注释是/* */，快捷键是alt+shit+A。
C.功能
a.计算能力
加减乘比较简单，除尘的两种写法需要注意，带括号是最新的玩法，./是老版本之前的写法。
.box {
width: 100 + 20px;
height: 200 --50px;
border: 2 * 5px solid red;
font-size: (300 / 20rem);
font-weight: 2000 ./ 5;
}
b.嵌套选择器，可以生成后代选择器。&表示当前选择器，不生成后代选择器。
.father {
width: 200px;
height: 300px;
// 自动生成后代选择器
.son {
width: 500px;
height: 600px;
// 指代当前选择器，方便迁移代码
&:hover {
color: red;
}
}
}
c.定义变量批量修改内容，LESS变量用来存储内容，方便后期批量调用。
@fontsize:30px;
.father {
font-size: @fontsize;
}
.son {
font-size: @fontsize;
}
D.导入
a.导入LESS文件的两种方法
@import url(./2.less);
@import url(./3);
b.导出
修改生成CSS路径，默认情况下，LESS文件生成的CSS在当前目录，如果想让LESS文件夹中的LESS文件生成到/CSS/文件夹中，可以在“设置->设置->搜索“easy”->settings.json中编辑”添加一行内容："out":"../css/"，即可改变LESS文件生成的CSS路径到/CSS/文件夹中。
或者在LESS文件的第一行放上如下代码，可以新建文件夹/文件并导出：
// out: ./abc/you.css
.list {
color: aliceblue;
}
c.禁止导出
如果不想让LESS被导出，则直接在LESS文件第一行输入：out:fasle
小结：使用rem开发移动适配网站的的注意事项
less的使用：
vsCode中安装easyless插件后，设置less自动生成CSS文件的目录为/CSS/文件夹；
同时要设置base.less/normallize.less为禁止导出：out:fasle，即不让它自动生成CSS文件到/CSS/文件夹；
在index.less文件中分别导入base.less/normalize.less即可：@import:url.
l ess对于后代选择器的自动生成非常方便，简单，简化了开发流程，提高了开发效果，同时&指代当前类名，非常好用。
css样式
less是预处理CSS的工具，布局完上述LESS后，相应CSS内容自动生成到index.css文件中，结构非常清楚。
Js调用
使用rem布局移动短配网站，涉及到视口、根字号、rem相互关系的理解与使用。引入flexible.js插件后，在盒子中直接使用rem单位，即可开发出移动适配站。
字体引用
通常开发前，需要规划好网站需要哪些字体图标，如果不够用，可以设计成对应的图标图片也可以。
然后在网页中分别引入CSS/JS/字体图标即可开始开发之路。
2、vw/vh适配
（1）vw/vh与祸口
vw/VH是两个相对单位，他们是相对视口宽度、高度计算结果的，1vw=1/100视口宽度，1vh=1/100视口高度。
开发时，要么用vw,要么用vh；如果 VW/VH都用的话，可能导致长度、高度不能等比例变化。
（2）下载别人图标
下载别人网站图标的样式，可以在文字图标上单位右键，查看该样式涉及的类名，并且找到该类名对应的CSS文件，在CSS文件中找到字体并下载，同时把样式复制下来放到自己的文件夹，即可完美实现。
（3）图标样式修改
修改字体大小，最好是iconfont，如果给了父元素，继续不下来，因为iconfont的优先级高于其父标签的权重。
（4）双排布局技巧
不同宽度设备实现等比绽放的思路，父标签左右padding为5，子标签左右padding为5，宽度50%，这就实现了一排出现2个子元素，且子元素之间的间隔均为10px。
（5）固定定位
使用vh/vw开发移动适配站时，使用固定定位技术时，要给一个高度，同时给一个100%的宽度，固定定准才能成功，否则内容不显示。
（6）开发优势
与rem相比，vw/vh直接使用即可，按照1/100的倍数关系，在LESS中把像素转换成vw/vh即可。不需要像rem一样，还要引入flexsible.js等文件。
二、响应布局
响应式网页，一套代码适配置不同宽度类型的屏幕。
前端UI框架，提供了大量的现成CSS样式。可以结合HTML/JS快速开发出相应的网页效果。有开发环境与源码两种形式，开发环境的bootstrap用于开发，是压缩过的，体积小速度快；源码体积大，主要是用以学习。
1、使用步骤
从官网下载boorstrap开发环境包，解压后，在网页head区域引入/css/bootstrap.css文件（开发环境的话，引入bootstrap.min.css），然后在元素中引入类即可。如版心.container，他实现了左右外边距是auto，实现了水平对齐，左右内边距是15它，确保了元素不靠近挨着边框。等于说，你调用了这一个类，就实现了4行代码的效果，开发效果大大提高。
2、栅格系统
布局响应式网页。栅格系统把网页宽度（视口宽度）等分为12份，把屏幕分为超小屏幕（xs，<768，col-xs-*）、小屏幕（sm，>=768，col-sm-*）、中型屏幕（md，>=992，col-md-*）、大屏幕（lg，>=1200，col-lg-*）。
如下代码可以实现的效果：大屏幕下每行显示4个盒子，中屏幕下每行有2个盒子，小屏幕/超小屏幕下每行有一个盒子。
<div class="container">
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">1</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">2</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">3</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">4</div>
</div>
<div class="container">
<div class="row"></div>
</div>
<div class="container-fluid">
<div>通栏效果</div>
</div>
版心类.container有一个15像素的左右内边距，类.row有一个15像素的负15左右外边距，刚好可以抵消.container自带的15像素左右内边距。另外，通栏类名是.container-fluid。
对于全局样式，组件，插件，熟悉能找到会用即可，不需要记忆太多内容。
3、全局样式
主要用来定义标签样式。使用方法是，引入样式表，调用相关类即可。
4、组件预览
封闭好的区域，如字体图标（两个类），下拉菜单，导航菜单，警告框、弹窗等等。使用方法是引入样式表，复制HTML结构即可。
5、插件效果
封闭了CSS/JS/HTML，实现交互效果的内容。使用方法，引入一个CSS，引入两个JS（先JQ，再BT），然后复制HTML结构。
使用bootstrap框架开发响应网站时要注意，先引入框架的CSS/JS，后引入自定义的CSS/JS，这是根据CSS层叠的特性，对于框架不满意的样式，可以修改覆盖掉原框架中的样式。另外，不需要额外加入base.less来清除盒子的默认样式，因为bootsrap自带清除样式的代码。
轮播图中图片自适应的问题，因宽度自动，故而控制高度在每种屏幕下的尺寸即可，如此，宽度会自动变化。此时需要把高度调整为100%并把其权重提升到最高（!important）层叠bootstrap中图片原高度auto。此外，bootstrap中轮播时显示的小圆点，其实就是一个盒子，重新设置其宽度、高度，交把圆角调试为0，即成变成其它无圆角的图形。
使用框架开发时，要注意，不要修改原框架中的内容，在自己的LESS中写样式，通过提升权重层叠框架中的样式，达成自己的目标。
删除冗余代码的技巧，通过“检查”，先找到代码，然后在vscode中折叠代码，可快速删除，并减少错误。
对于导航条背景不透明的情况，我们一般通过“检查”，从外而内，逐个检查元素的背景与边框。然后设置背景为透明background:transparent/border:0即可。如果要把导航固定显示在头部，或者底部，只需要在组件中查看导航相应的类，找到固定的类后，在头部导航最外层标签添加即可。遇到通栏的导航时，只需要把通栏的.container-fluid改变成.container即可快速实现。
定制导航，开发过程中，可能会遇到导航条在某些尺寸中没有折叠，这个时候可以根据组件中的提示，找到相应的标签，在“定制”页面搜索关键词，找到要修改的屏幕的参数，修改之后，下载bootsrap包到本地，覆盖原bootstrap包即可，或者重新引入些相应的JS/CSS即可。例如，导航条，在小于等于992的时候，没有折叠，此时可以在导航条组件说明中找到关键词“@grid-float-breakpoint”，在“定制”页面搜索“@grid-float-breakpoint”，把“@screen-sm-min”修改成“@screen-md-min”即可实现屏幕小于等于992时，自动响应折叠导航的效果。
如果想让光标同时出现在4个竖排的div中某个位置，需要使用快捷键“ctr+alt+下方向键”，哪些以来，可以同时在4个标签内同时输入相同的内容，非常方便。
.container版心有一个左右15像素的内边距，如果想去掉，可以在.container内添加一个类名为.row的元素，即可抵消.container自带的左右15像素的内边距，这是因为.row自带的左右外边距为-15像素。
同理，col-xs-*、col-sm-*、col-md-*、col-lg-*他们只是用来布局的，不能改变，且也自带左右15像素的内边距，因此，要改变col-xs-*、col-sm-*、col-md-*、col-lg-*之间的间距，只能靠内容撑开了。扩展开来，如果要抵消掉col-xs-*、col-sm-*、col-md-*、col-lg-*的左右15像素的内边距，只需要把其内容标签添加一个负15像素的左右外边距即可。
响应式网站适合企业站，内容比较少的网站。像淘宝、京东这样的电商网站，是适合做成一个响应式网站的，一般的做法是做成两个独立站，一个PC站，一个移动站。