[前端学习]移动web部分学习笔记，第二天 [前端学习]移动web部分学习笔记

网页布局方法总结：

目前已经学习了两种布局方式：
- 固定宽度布局：常见于PC端，设定固定的宽度作为版心来布局
- 流式布局：常见于移动端，所有宽度不固定，采用相对参照的方式，用百分比来设置
接下来还要接触两种布局方式：
- 栅格式布局：这种布局方式被bootstrap框架使用，主要思路是让整个页面分为多个均宽等份。某个元素设置宽度时，让它占有几个等份，而不是直接设置宽度
- 响应式布局：很流行的布局方式，自动检测设备宽度来布局，就是说不同分辨率设备访问同一网页，看到的布局方式可能会有不同，达到一个页面可以适配多种设备
注意：每次布局方式都有其可取之处，所以这几种布局方式不应该单独存在，往往是根据实际情况结合使用

响应式布局介绍

核心概念：使用媒体查询来获取设备的宽度，然后根据宽度来设置不同的css样式，实现响应式布局
优点：响应式布局可以使网页在不同的设备上都能完美的展现，提高用户的浏览体验
缺点：正因为需要对不同设备设置不同的css样式，所以不得不利用媒体查询书写大量的代码来进行适配。代码冗余过多页面体积太大，就会造成严重的性能消耗
应用场景：根据上述优缺点可以知道，响应式开发一般主要用在企业官网、博客、资讯网站等，以浏览展示内容为主没有太多复杂交互的网站。这样才能在提高用户体验的情况下，尽量减少性能消耗
设备宽度划分建议：
- 大屏设备 w>=1200px
- 中等屏幕 992px<=w<1200px
- 小屏设备 768px<=w<992px
- 超小屏幕 w<768px

响应式开发

移动web开发和响应式开发是前端人员的必备技能
在以前为了适配移动端，通常是专门为移动端做一套新的页面。但是现在移动设备越来越多，如果每种设备都做一套页面开发成本太大。所以正常情况下，现在新做一个网站，优先都会考虑到响应式开发

媒体查询

媒体查询的作用是设置不同屏幕宽度下的样式
基础语法：
- @media mediatype and|not|only (media feature) {
  CSS-Code;
  }
- mediatype规定用于哪种设备，例如：要应用于电脑屏幕，平板电脑，智能手机等，就写screen
- and|not|only是作为连接条件判断的关键字，最常用的是and。not是取反值(不在范围内才应用，几乎用不到)
- media feature条件判断，例如：写min-width: 1200px，是限制页面宽度最小不能低于1200px，也就是说必须大于或等于1200px才能应用内部的css样式
- 还有很多属性值，查阅手册
条件判断的知识点：
- 当你用媒体查询来设置css样式时，必然会有条件判断，根据满足不同条件应用不同样式
- 书写建议：
  - 如果判断的是最小值min-width，那么判断值需要按照从小到大的顺序写(推荐，因为bootstrap就是用的这个方式)
  - 如果判断的是最大值max-width，那么判断值需要按照从大到小的顺序写
- 不同类型屏幕肯定是有个值的范围区间(例如768<宽度<992)。但是实际书写中，只要满足上面两种情况的宽度值判断。那么一个就行了(对应判断的最大最小)，不用写完整的区间
媒体查询特性：
- 向上兼容：宽度值更小的设置，默认会传递到宽度值更大的设置中去
- 向下覆盖：宽度值更大的设置会覆盖宽度值小的设置
- 解释：就是说如果你只写了宽度值小的设置，那么它的向上兼容会默认往上传递，在宽度值更大没写的情况下，会应用小的设置。但是一旦写了宽度值大的设置，那么它向下覆盖会覆盖掉传递过来的设置，这样宽度值小的设置就只会在其范围内应用，宽度值大的设置也是。这也是为什么不用写完整范围区间的原因。
- 注意：如果写了完整范围区间，这两个特性不会生效
媒体功能知识点
- 媒体功能就是条件判断的关键字(比如：min-width、min-device-width)，这里说明一下有device和没有device的区别
- 有device的时候，它获取的宽度值是设备的宽度值，重点：因为pc端设备宽度不会随着浏览器伸缩而改变，所以你就算写多个条件判断，也只有满足当前设备宽度值的css样式才会生效。一般来说，如果只针对移动端做媒体查询，那么才建议用有device的媒体功能
- 没有device的时候，它获取的是可视区域的宽度(也可以理解为页面宽度)，这个不管移动端还是pc端，只要伸缩浏览器页面宽度值就会变化，所以不存在上面说的问题。如果要兼顾pc端和移动端，那么建议用没有device的媒体功能
补充说明
- 媒体查询不光可以在内部写直接css样式，也可以通过它来引入不同的css样式表
- 写法：
- 如果满足条件判断，就会引入对应的样式表文件

响应式开发框架

因为web开发越来越复杂，所以有人将比较常用的功能模块组件化(轮播图、导航栏、选项卡等)，然后将一系列的组件封装，就形成了css框架。现在框架有非常多，比如：bootstrap、amazeUi、Framework7等等。最受欢迎当属bootstrap

Bootstrap

关于bootstrap的使用方法，中文网已经有详细说明，不作赘述
这里着重说明下，bootstrap的布局核心概念：栅格式布局
- 栅格式布局是流式布局，即：从左往右，从上到下
- 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，首先行必须包含在 .container （根据不同设备宽度先设置好的固定宽度）或.container-fluid （100% 宽度）容器中
- 然后在容器添加“行（row）”
- 再通过“行（row）”在水平方向创建一组“列（column）”，默认情况下行被分为12等份栅格，不设置的话一个列占据一份栅格
- 通过.col-(xs||sm||md||lg)-x(数字)这种预定义的类，就可以设置每个列到底占据多少个栅格(即宽度)
- xs表示超小屏幕下占据几个栅格，sm表示小屏幕下占据几个栅格，同理。md表示中屏幕，lg表示大屏幕。这其实就跟响应式一样，根据不同宽度设置不同样式。不过框架封装好了，不用再去写媒体查询。可以不用全屏幕类都写，但要注意向上兼容和向下覆盖的特性
- 还有一些栅格相关的样式：列偏移offset，列排序push||pull，列嵌套，隐藏类hidden等，可以看中文网了解，上面都有详细说明介绍
另外如果想定制bootstrap的一些设置，比如：每行分为多少等份这类的，中文网上也有详细说明
总而言之就是多看文档

Less

less是一种动态的样式表语言，通过简洁的语法让css编写更加简单。注意：less既然是一种语言，那么就其专门的语法。并且浏览器不能解析less文件，所以less实质上是一套语法和编译器组成的
必备环境搭建：
- 首先必须安装了node以及npm
- 然后通过命令行输入npm install -g less就能在全局环境下安装less，通过lessc -v指令能检测是否安装成功
- 手动编译less文件，需要先用命令行进入less文件所在目录，然后输入lessc xxx.less xxx.css，前一个是需要编译的文件，后一个是需要变成生产的css文件
- 一般来说代码编辑器都有自动编译功能，比如vscode，只要搭建好了环境，再安装一个easyless插件，就能自动编译less文件
语法简单介绍
- 变量：@变量名:值通过@符号来声明变量，并赋值。在写css样式时，该变量就可以作为样式的属性值来使用
- 混入(也叫混合，相当于函数)：
  - .example { xxx: xxx}这是一个正常的样式，在less可以样式复用。如果想要使用与这个类名相同的样式，直接在大括号内写类名即可。例如：.example2 { xxx: xxx; .example}，这里混入类名的样式，就会自动被编译到新的类名中
  - 并且还可以跟函数一样设置默认参数：.example(@a:10px) { xxx: @a}，这时混入类名，可以这样写.example2 { xxx: xxx; .example(xx)}。这个参数可以根据自己需要来传入，如果不写参数那么就会使用默认值10px
- 嵌套。用法时不用再多次写类名结构，而是父元素大括号内部，直接写子元素的类名。如果什么都不写编译后是后代选择器，加上>符号编译后就是子选择器。另外注意：如果要再当前元素内部写它的伪类和伪元素，必须加上&符号。
下面是个简单的例子：
- div {
  color: @baseColor; //用变量来设置值
  .header(); //混入复用之前写好的.header的样式，不写参数使用默认值
  >p { //给直接子元素p设置样式
  font-size: 16px;
  }
  a { //给所有后代a标签设置样式
  text-decoration: none;
  }
  &::before { //为其伪元素设置样式
  content: "";
  }
  }
另外如果想注释也一起编译，需要使用/**/这种注释符才行。less也支持@import在样式文件中，引入其他样式文件
如果想不编译直接引入less文件也有办法，如下：
- 1.与引入css文件大致相同
- 2.引入专门解析less的js文件
更多语法看中文手册

rem的介绍

rem是css3中新增的一种大小单位，类似于以前的em，都是以元素的字号作为参照方式
em和rem的区别
- em优先参照当前元素的字号，如果当前元素没有设置，就参照父容器或者浏览器默认字号(每个浏览器都是有默认字体大小的)
- rem是参照根元素的字号(html)，如果根元素没有设置就参照浏览器默认字号
rem的优点
- 相对em而言，如果当前元素需要设置字体大小，那么em的大小实际上就是被定死了。而rem要灵活很多，因为给当前元素设置字号并不会影响rem。在网站开发中也推荐使用rem
常见使用场景：
- 开发中ui给我们的稿件尺寸都是行业通用的尺寸，但是手机屏幕的宽度各式各样，为了使展示效果更好，一般是同比例的缩小或者放大具体元素，使整个页面的总体比例不变
- 思维模式跟栅格式系统很像。不管是什么尺寸的图片，首先把它分为x份(自定义)等份。那么每个元素再该图中占据的份数是可以知道的。然后不管什么手机设备，也把它分为x份等份(必须与稿件相同)。算出每份的值，再把值设置为根元素字号，那么就可以通过rem来设置大小了。
- 虽然不同屏幕分出来的值可能不同，但是通过rem设置它的比例是相同的，就达到了想要的目的